#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;
...