Question

让我以DVD管理应用程序为例来说明我的问题，我们有一个详细视图，该视图通过使用/dvd/:id中的ActivatedRoute来获取DvdInfoComponent的路由参数，如下所示：
< / p>

ngOnInit() {
    this.dvdService.getById(
        this.activatedRoute.snapshot.params['id']
    ).subscribe(dvd => { this.dvd = dvd; });
}

现在，假设我们想将此组件包含在其他组件中，也许是在具有每个dvd扩展条的手风琴中。我们称之为DvdListComponent。我们想这样使用

<!-- *ngFor stuff -->
<app-dvd-info [id]="dvdId"></app-dvd-info>

为此，我们需要一个@Input，在某些情况下，我们需要一个setter，看起来像这样

@Input() set id(id: string) {
    this.dvdService.getById(id).subscribe(dvd => { this.dvd = dvd; });
}

这是我的问题，如果我的组件中都有两个解决方案，一个将覆盖另一个解决方案的结果。即使我在获取ngOnInit()函数中的dvd之前检查id参数是否存在，从理论上讲，它也可能是诸如/collection/:id之类的其他组件的id。如何以两种方式使用组件？还是为此目的而必须管理DVD组件的两个相似副本？

Answer 1

对于这种情况，最好使用“智能组件vs演示组件”。智能组件：有时也称为应用程序级组件，容器组件或控制器组件。演示组件：有时也称为纯组件或哑组件。

请找到链接 Angular Architecture - Smart Components vs Presentational Components

Answer 2

通过了解您的问题，您可以尝试以下代码：-

<script type='text/javascript'>
function loadPlugin() {
codeweavers.main({
pluginContentDivId: 'pluginContent',
vehicle: {
type: 'Car',
identifier: '',
identifierType: 'CAPSHORTCODE',
isNew: false,
cashPrice: '',
mileage: '',
imageUrl: '',
linkBackUrl: '',
registration: {number: ''},
}
});
}
loadPlugin();

</script>

您可以检查ngOnInit() { // first check if id is used as @Input otherwise set id from URL. const id = this.id || this.activatedRoute.snapshot.params['id']; this.dvdService.getById(id).subscribe(dvd => { this.dvd = dvd; }); }是否作为id值存在，如果不存在，请从URL获取。

@Input

在这种情况下，您需要删除设置器功能。

使用路径参数和输入的组件的最佳方法？

2 个答案: