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

Question

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

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

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

Answer 1

是的，如果您通过使用父组件中的选择器来使用子组件，您可以轻松做到这一点。但是由于您正在使用路由组件并使用 <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);
   })

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

Define a routed element with multiple templates

angular

url-routing

angular-template