Angular 从一个视图访问模板引用变量到另一个视图

现在，我正在处理一个项目，该项目的网页设计将在一个页面上包含多个视图（多个

HTML

文件）。虽然这不是一个新的设计，但我找不到解决方案

我尝试的是从另一个视图访问另一个元素，我知道视图呈现后，它们将是单个HTML而不是多个HTML，但是角度语法不允许我进行此操作

这是示例代码

假设我有两个文件名为

layout.html

，

header.html

也可以说，头部有一个名为

header.html

<div>
     <button (click)="sideBar.toggle()">
          <mat-icon>menu</mat-icon>
     </button>
</div>

<div>
    <mat-toolbar>
        <app-header></app-header> <!-- important part -->
    </mat-toolbar>
    <mat-sidenav-container>
        <mat-sidenav #sideBar mode="side" opened> <!-- important part -->
            <app-sidebar></app-sidebar> 
        </mat-sidenav>
        <mat-sidenav-content>
            Main content
        </mat-sidenav-content>
    </mat-sidenav-container>
</div>

因此，我尝试使用标题上的按钮切换

，并使用

#侧边栏

---

这可能吗？

您可以创建一个输出，以便在组件之间共享信息

HeaderComponent.ts截断文件

从'@angular/core'导入{Component，OnInit，Output，EventEmitter}；
出口级机头{
类型：“ToggleNavBar”|“任何其他类型”；
资料：有；
}
@Output（）headerEvent:EventEmitter=新的EventEmitter（）；
//应在按钮的（单击）事件中使用
onToggle（）：void{
emit（{type:'ToggleNavBar'，data:{}}）；
}

HeaderComponent.html文件

菜单

layout.html文件

主要内容

No是不可能的。您无法从header组件访问侧栏，唯一的方法是在header组件中创建一个Output（），布局组件侦听此输出，当输出将发出时，您可以拖动侧栏。有意义吗？这是实现这一目标的有效方法吗？我想最终它们将被呈现为一个，那么为什么这里有很多事情要做呢？因为您选择将这两个组件分开，这是组件之间通信的唯一方式。我认为你不应该把这两个组件分开，只做一个组件。这是一个事件的大量代码，所以可能你应该试着只做一个组件，将标题和sidenav结合起来。你应该阅读这篇文章，为了理解组件之间的交互是如何在角度上工作的，这是非常有趣的。

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

export class HeaderEvent {
    type: 'ToggleNavBar' | 'AnyOtherType';
    data: any;
}

 @Output() headerEvent: EventEmitter<HeaderEvent> = new EventEmitter();

 // Should be use on the (click) event of the button
 onToggle() : void {
     this.headerEvent.emit({type: 'ToggleNavBar', data: {}});
 }

<div>
     <button (click)="onToggle()">
          <mat-icon>menu</mat-icon>
     </button>
</div>

<div>
    <mat-toolbar>
        <!-- Here you can listen the headerEvent event and do what you nee to do -->
        <app-header (headerEvent)="sideBar.toggle()"></app-header> 
    </mat-toolbar>
    <mat-sidenav-container>
        <mat-sidenav #sideBar mode="side" opened>
            <app-sidebar></app-sidebar> 
        </mat-sidenav>
        <mat-sidenav-content>
            Main content
        </mat-sidenav-content>
    </mat-sidenav-container>
</div>