时间戳

首页 > 解决方案 > 在 Angular 中嵌套组件时，我可以在应用程序选择器函数中指定额外的参数吗？

angular - 在 Angular 中嵌套组件时，我可以在应用程序选择器函数中指定额外的参数吗？

问题描述

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>

…………………………………………………………………………

因此，用户组件依赖于输入一个 id（例如 users/1001），当我尝试在模态窗口中使用它时，如何将它输入到我的应用程序选择器中。

我已经尝试过 <app-users/1001></app-users/1001> 或 <app-users/1002></app-users/1002> 但这不起作用，即使这些模式窗口也是空白的路线确实在我的网址中起作用以生成特定数据

标签： angulartypescriptbootstrap-modalselector

解决方案

You can't change the component selector. To fulfill your requirement, you may have to define one more component which is almost same as your route component.

ChildUserComponent:

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

Your users.componenet.ts

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

  constructor(private route: ActivatedRoute) {}

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

Your users.componenet.html

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

Your modal.component.html

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

Your modal.component.ts

...
userId: string;
...

推荐阅读