Question

我有一个home组件，我想将其实现为容器组件。根据所选的导航路径，由于模板中具有导航组件，它将从相对服务中收集数据并将其提供给目标子组件，该子组件将只是一个表示组件。

我想延迟加载那些子组件，因为它们将主要用于其中之一。但是，这样做不能简单地通过@Input属性将数据从父级传递给子级，因为子级组件将在<router-outlet>标记中呈现，从而阻止了我在直路。

我看到3种方法：

根据路由获取数据，然后在服务中填充变量。但是，表示组件需要对服务的引用，它将不再是 dumb 组件。
在路由器中使用resolve()方法来主动获取数据并将其提供给组件。
为每个孩子创建另一个容器组件，并在此处移动逻辑以获取数据并将其提供给孩子@Input。但这对我来说似乎是多余的。

还有没有其他方法可以实现这一目标？

家庭路由

const routes: Routes = [
{
path: "",
component: HomeComponent
children: [
  {
    path: "",
    loadChildren:"shopping-list/shopping-list.module#ShoppingListModule"
  },
  {
    path: "history",
    loadChildren: "history/history.module#HistoryModule"
  }
]
}];

弹出列表路由

const routes: Routes = [{ path: "", component: ListComponent }];

列出组件（历史记录具有相同的结构）

@Component({
selector: "app-list",
templateUrl: "./list.component.html",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ListComponent implements OnInit {

 @Input()
 items: ShoppingListItem[];

 ngOnInit() {}
}

延迟加载的子组件的角容器组件

0 个答案: