Передача динамических объектов в реагирующий маршрутизатор - PullRequest
Новая
       8

Передача динамических объектов в реагирующий маршрутизатор

0 голосов
/ 15 февраля 2019

Здравствуйте. Как передать динамические данные в angular7.2.4?Я гуглил последние 2 часа и не вижу простого ответа.на SO и github они говорят, что для создания общих сервисов, используйте data объект на Routes, похоже, что angular не имеет такой функциональности, как реагирует 

<Route
  path='/dashboard'
  render={(props) => <Dashboard {...props} isAuthed={true} />}
/>

вот мой текущий код,

<table>
  <tr>
    <th>id</th>
    <th>name</th>
    <th>username</th>
    <th>email</th>
    <th>delete</th>
  </tr>
  <tr *ngFor="let user of users">
    <td>
      {{ user.id }}
    </td>
    <td>
      {{ user.name }}
    </td>
    <td>
      {{ user.username }}
    </td>
    <td>
      {{ user.email }}
    </td>
    <td>
      <!-- <input type="checkbox" /> -->
      <button (click)="handleDeleteUser(user)">DEL</button>
    </td>
    <td>
      <button [routerLink]="['/edit', user]"> <-- problem here
        EDIT
      </button>
    </td>
  </tr>
</table>

на /edit url, user obj будет заполнено.Я не хочу передавать и Id также и сделать запрос от бэкэнда, потому что данные уже есть, мне просто нужно передать их.есть ли способ?спасибо

1 Ответ

0 голосов
/ 15 февраля 2019

Вы действительно можете использовать службу, если хотите поделиться объектом с другой страницей.

Идея довольно проста - вы передаете пользователя какой-то службе, а затем переходите на страницу.Страница, когда она загружается, будет извлекать пользователя из сервиса. 

interface User {
    id: number;
    name: string;
    surname: string;
    email: string;
}

@Injectable({providedIn: 'root'})
export class ActiveUserProvider {
    private _user: User;

    public get user(): User {
        return this._user;
    }

    public set user(value: User) {
        this._user = user;
    }
}

Мы можем добавить этот сервис в ваш компонент с помощью таблицы и кнопки редактирования: 

@Component()
export class TableComponent {
    // inject the service
    constructor(
        private activeUser: ActiveUserProvider,
        private router: Router)
    {}

    goToEditPage(user: User) {
        this.activeUser.user = user;
        this.router.navigate(['edit']);
    }
}

Простовызовите метод goToEditPage от нажатия вашей кнопки: 

<button (click)="goToEditPage(user)">EDIT</button>

И тогда ваша страница редактирования будет выглядеть так 

@Component()
export class EditUserComponent implements OnInit {
    public user: User;

    constructor(private activeUser: ActiveUserProvider) {}

    public ngOnInit() {
        this.user = this.activeUser.user;
    }
}

Некоторые преимущества этого подхода:

  1. Отдельный сервис со строгими типами для контроля того, что совместно используется компонентами
  2. Поскольку это отдельный сервис для инъекций, теперь мы можем легко протестировать два компонента по отдельности: мы можем проверить, чтокомпонент таблицы устанавливает активного пользователя по нажатию кнопки «редактировать»;мы также можем проверить, что компонент edit получает активного пользователя при инициализации.
...