使用多个模板定义路由元素

Define a routed element with multiple templates

我正在尝试创建一个具有多个模板入口点的路由组件,但我不知道这在 Angular 中是否可行。我再详细说一下。

在Angular中我们可以创建包含templateRefs的嵌套元素,将子组件的某些部分注入到父组件中(例如下图中的Menu from child)。

主要问题是我不知道如何使用路由组件执行此操作。我希望父级上的导航在 ng-content 上进行导航(现在将是 <router-outlet>),但也根据我在子组件中定义的一些模板更新菜单。这可能吗?我该如何开始?

是的,如果您通过使用父组件中的选择器来使用子组件,您可以轻松做到这一点。但是由于您正在使用路由组件并使用 <router-outlet> 来呈现子组件。

您需要将子组件的数据传递给父组件。 为此,您可以使用 服务 将数据呈现在子组件中决定数据的部分的父组件中。

为此你可以创建一项服务假设 data.service.ts:

@Injectable({
  providedIn: 'root'
})
export class DatService {
  dataToRendered$: BehaviorSubject<boolean> = new BehaviorSubject(false);
  constructor(){}
  setDataToRender(data:any){
   this.dataToRender.next(data);
  }
}

因此在父组件中,您可以使用此服务的实例并保持订阅变量 dataToRender。每当数据发生变化时,您都会获得更新后的数据。

this.dataService.dataToRender.subscribe((data)={ console.log(data)})

而在子组件中,您只需调用方法 setDataToRender() 方法来更新父组件中的数据,方法是使用 DataService 的实例。 示例代码如图:

this.dataService.setDataToRender({name:'Demo'});

已编辑:

如果您在子组件的 html 中定义了模板。您可以使用 @ViewChild('template') template: TemplateRef; 在 .ts 中获取它 您的 html 子组件文件应包含:

<ng-template #template></ng-template>

并调用 setDataToRender(this.template).

在父组件中获取此数据并在html中定义<ng-container #vc></ng-container>。现在在 .ts

中添加以下内容
  @ViewChild('vc', {read: ViewContainerRef}) vc: ViewContainerRef;

  this.dataService.dataToRender.subscribe((data)={ 
   this.vc.insert(data);
   })