Question

角度7，我有一个组件可以响应这样的路线

export class MyComponent implements OnInit {

ngOnInit() {
    this.route.paramMap.pipe(
            switchMap((params: ParamMap) => {
                return this.myService.get(+params.get('id'));
            })
        )
            .subscribe( ...

现在在另一个组件模板中，我想直接在模板中调用此组件，我该怎么做？

<app-my></app-my>

如何提供路由参数id？

Answer 1

只需使用/添加@Input并使用标准的property binding。

MyComponent.ts

export class MyComponent implements OnInit {

    @Input()
    id: string;

    ngOnInit() {
        if(!this.id)
        {
          this.route.paramMap.pipe(
                switchMap((params: ParamMap) => {
                    return this.myService.get(+params.get('id'));
                })
            )
                .subscribe( ...

root-component.ts

<app-my [id]="'some value'"></app-my>

如何在Angular中调用模板中的路由组件

1 个答案: