将元素ID从组件传递到组件（角度）

Question

早上好！

我正在构建一个Angular应用程序，并且想要执行一个sidenav的简单切换。 html的组成如下：

app.component.html

<div class = "main-container">
  <app-navbar></app-navbar>
  ...
  <mat-sidenav-container class = "example-sidenav-container">
    <mat-sidenav #snav>
       ...
    </mat-sidenav>
  </mat-sidenav-container>
</div>

navbar.component.html （具有app-navbar选择器）

<mat-toolbar color = "primary" class = "topbar telative">
  <button mat-icon-button (click) = "snav.toggle()">
    <mat-icon>menu</mat-icon>
  </button>
</mat-toolbar>

每当我尝试单击应该打开/关闭sidenav的按钮时，就会出现错误Cannot read property 'toggle' of undefined 。 我猜这是因为元素#snav没有在与应触发它的click事件相同的组件中定义。 有人可以告诉我如何将该引用从一个元素传递到另一个元素吗？ 另外，如果可能的话，有人可以给我解释一下#语法在Angular元素中的作用。

提前致谢，

Answer 1

您可以这样：

在navbar.component.ts中，您可以使用@output发出打开/关闭菜单的事件。

@Output() toggleSidenav = new EventEmitter();

并在navbar.component.html中发出事件。

<mat-toolbar color = "primary" class = "topbar telative">
  <button mat-icon-button (click) = "toggleSidenav.emit()">
    <mat-icon>menu</mat-icon>
   </button>
</mat-toolbar`

最后在app.component.html中获取切换菜单的事件

<app-navbar (toggleSidenav)="snav.toggle()"></app-navbar>

去尝试一下。

Answer 2

请参阅此Stackblitz与您的代码一起使用（我做了一些小的更改）。 https://stackblitz.com/edit/angular-sidenav-angularmaterial?file=src/app/navbar/navbar.component.html＃是@ViewChild（'somename'）语法的一部分，在html中使用模板，以指定您正在侦听子组件，该子组件正在“ somename”变量中发送信息（然后在模板“ #somename”中使用）。

查看以下示例： https : //www.centric.eu/NL/Default/Craft/Blogs/2018/01/25/Angular-components-How-to-talk-to-your-children-and-listen-to他们有什么要说的