Могу ли я указать дополнительный параметр в функции выбора приложения при вложении компонента в Angular?

#angular #typescript #bootstrap-modal #selector

#angular #typescript #bootstrap-модальный #селектор

Вопрос:

файл app.routing.module.ts

 const routes: Routes = [ 
  {path: 'users/:id', component: UsersComponent},
];
  

файл users.componenet.ts

 @Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css'],
})
  

файл modal.component.ts

…………..

    <div class="modal-body">
       <app-users></app-users>
</div>
  

……………

Итак, компонент users полагается на ввод идентификатора (например, users / 1001), как я могу ввести это в свой селектор приложений при попытке использовать его в модальном окне.

Я пробовал <app-users/1001></app-users/1001> или <app-users/1002></app-users/1002> в нем, но это не работает, и модальное окно остается пустым, хотя эти маршруты работают в моем URL для генерации конкретногоданные

Ответ №1:

Вы не можете изменить селектор компонента. Чтобы выполнить ваше требование, вам, возможно, придется определить еще один компонент, который почти совпадает с вашим компонентом маршрута.

ChildUserComponent:

 @Component({
  selector: 'app-child-user',
  templateUrl: './child-users.component.html',
  styleUrls: ['./child-users.component.css'],
})
export class ChildUsersComponent {
  @Input() userId: string;
}
  

Ваш users.componenet.ts

 ...
export class UsersComponent implements OnInit {
  userId: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
     this.userId = this.route.snapshot.params.id;
  }
}
  

Ваш users.componenet.html

 <app-child-user [userId]="userId"></app-child-user>
  

Ваш modal.component.html

 <div class="modal-body">
    <app-child-user [userId]="userId"></app-child-user>
</div>
  

Ваш modal.component.ts

 ...
userId: string;
...