Question

早上好！

我正在构建Angular应用程序，我想对sidenav进行简单的切换。 html的组成如下：

this.datas

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>（具有app-navbar选择器）

navbar.component.html

每当我尝试单击应该打开/关闭Sidenav的按钮时，就会出现错误<mat-toolbar color = "primary" class = "topbar telative"> <button mat-icon-button (click) = "snav.toggle()"> <mat-icon>menu</mat-icon> </button> </mat-toolbar>。我猜这是因为元素Cannot read property 'toggle' of undefined与应该触发它的click事件不在同一组件中定义。有人可以告诉我如何将该引用从一个元素传递到另一个元素吗？另外，如果可能的话，有人可以给我解释一下#snav语法在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-what-they-have-to-say

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

2 个答案: