Question

在我的 app.component.html 中，我有一个用于导航的结构标记和一个主要区域，我打算用其他组件呈现不同的东西。

<navbar (onPopup)="popup.show($event);">NavBar</navbar>
<sidebar>SideBar</sidebar>
<popup #popup>Popup</popup>
<mainarea>MainArea</mainarea>

我们的想法是创建一组以相同选择器为目标的组件（即 mainarea ），但显示完全不同的模板。所以，我有这样的事情。

// ./demo1/demo-x.ts
import { Component } from "@angular/core";
@Component({ selector: "mainarea", template: require("./demo-x.html") })
export class DemoX { constructor() { console.log("Demo X"); } }

但是（注意选择器的目标是页面上的相同标签）就像这样。

// ./demo2/demo-y.ts
import { Component } from "@angular/core";
@Component({ selector: "mainarea", template: require("./demo-y.html") })
export class DemoY { constructor() { console.log("Demo Y"); } }

在菜单系统中，我们的想法是接收用户的点击，并根据他们点击的内容，将正确的页面加载到持有人标记 mainarea 。

目前，它失败了，因为Angular并不喜欢在同一个选择器中呈现两个不同的组件。我看到了这个问题，我怀疑我可能已经开始基于一个有缺陷的想法开始了。

我觉得路由可能是一个好主意但是直截了当，我无法看到如何将它合并到菜单系统中。只有在 mainarea 控件中包含的网站部分应该更新，而其余部分不应该更改（并且肯定不重新加载）

如何从Angular中的不同组件定位相同的选择器/控件

0 个答案: