Question

我是Angular的新手，我已经从另一个组件中获得了调用功能。

我的结构是：

标头组件

带侧边栏组件的文件夹在哪里

所以在边栏中，我有这段代码，您可以看到带有功能sideBar.toggle的按钮，该按钮正在该位置工作，但是我试图将按钮移至实际上应位于的标题处

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

.container {
    width: 100%;
    height:auto;
  }

  .sidenav {
    width: 300px;
  }

<mat-drawer-container class="container" autosize>
    <mat-drawer #sideBar class="sidenav" mode="over">
      <p>Auto-resizing sidenav</p>
      <p *ngIf="showFiller">Lorem, ipsum dolor sit amet consectetur.</p>
      <button (click)="showFiller = !showFiller" mat-raised-button>
        Toggle extra text
      </button>
    </mat-drawer>
  
    <div class="example-sidenav-content">
      <app-google-map></app-google-map>
    </div>
    <button type="button" mat-button (click)="sideBar.toggle()">
        Toggle sidenav
      </button>
  </mat-drawer-container>

但是当我尝试从Header组件调用按钮时，它不起作用

这是代码：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  Name = 'Menuckaren';
  Navigation = 'Navigácia';
  icons = ['color_lens', 'favorite'];

  constructor() { }

  ngOnInit() {
  }

}

.example-icon {
    padding: 0 14px;
  }
  
  .example-spacer {
    flex: 1 1 auto;
  }

  .navigation {
    -webkit-box-shadow: inset 0px 13px 19px -2px rgba(0,0,0,0.43);
    -moz-box-shadow: inset 0px 13px 19px -2px rgba(0,0,0,0.43);
    box-shadow: inset 0px 13px 19px -2px rgba(0,0,0,0.43);
  }

<mat-toolbar color="primary">
  <mat-toolbar-row>
    <span>{{Name}}</span>
    <span class="example-spacer"></span>
    <button *ngFor="let icon of icons" mat-icon-button>
      <mat-icon>{{icon}}</mat-icon>
    </button>
  </mat-toolbar-row>

  <mat-toolbar-row class="navigation">
    <button mat-raised-button color="primary" (click)="sideBar.toggle()">{{Navigation}}</button>
    <span class="example-spacer"></span>
  </mat-toolbar-row>
</mat-toolbar>

Answer 1

使用事件发射器。并尝试掌握使用@output和@input字段/属性的想法 https://angular.io/api/core/EventEmitter

Answer 2

这是预期的行为。 toggle()函数在边栏组件中有效，因为您为#sideBar标记了mat-drawer引用。但是我看不到您的app-header组件中有任何侧边栏引用。

我建议您阅读@Ploppy建议的组件交互指南的官方文档。然后您会意识到有很多方法可以实现您想要的。

角度6 |如何从父组件调用子组件中的功能？

2 个答案: