在Angular 4视图中渲染路由器组件

Question

有没有办法在不明确执行router.navigate方法的情况下呈现路由器组件？

我目前的方法如下：

public onClickEdit(id: number): void {
    this.router.navigate(['...', '...', '...', id], {queryParams: {
        id: id
    }});
}

如果我改为，想要直接在我的视图中渲染此组件，我可以这样做吗？

<div class="my-component">
    <!-- Can I render my component directly in here? -->
    router.navigate(...)
</div>

由于

Answer 1

当然，你只需要给它一个selector： 例如，如果要在组件中渲染DemoComponent：

<强> DemoComponent：

@Component({
  selector: 'demo-component',
  templateUrl: './demo-component.component.html',
  styleUrls: ['./demo-component.scss']
})
export class DemoComponent {

}

您的组件：

<div class="my-component">
    <!-- render demo component -->
    <demo-component></demo-component>

</div>

不要忘记将DemoComponent导入组件。