Question

我需要在边栏中添加边栏组件功能。

我的标题组件

import { Component, OnInit, Input,ViewChild } from '@angular/core';
import { SidebarComponent } from '../sidebar/sidebar.component';

@ViewChild(SidebarComponent) SidebarComponent;


ngOnInit() {
  this.SidebarComponent.testFunction();
}

侧边栏组件

testFunction() {
   console.log('value');
}

出于理解的目的，我添加了必要的代码块。当我使用上述代码错误时说，

错误TypeError：无法读取未定义的属性'testFunction' 在HeaderComponent.push ../ src / app / layout / components / header / header.component.ts.HeaderComponent.ngOnInit（header.component.ts：57）

您能帮我解决此问题吗？

Answer 1

在子视图初始化后调用它。

  @ViewChild(SidebarComponent) sidebarComponent: SidebarComponent;

  ngAfterViewInit() {
     this.sidebarComponent.testFunction(); 
  }

Answer 2

为了在Angular中共享功能，最好在两个组件中使用服务并调用其功能。

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class SharedService {

  constructor() { }

  sharedFunction(){
    console.log('here');
  }

}

在两个组件中，component1：

import { SharedService } from '../shared.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: '.....',
  templateUrl: '.......',
  styleUrls: ['........']
})
export class Component1  implements OnInit{

  constructor(private sharedService: SharedService) { }

  ngOnInit() {
   this.sharedService.sharedFunction();
  }

}

component2：

import { SharedService } from '../shared.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: '.....',
  templateUrl: '.......',
  styleUrls: ['........']
})

export class Component2  implements OnInit{

  constructor(private sharedService: SharedService) { }

  ngOnInit() {
   this.sharedService.sharedFunction();
  }

}

Answer 3

可以使用服务来完成。出于说明目的，我们将其称为HeaderAndSidebarService：

文件名：header-and-sidebar.service.ts

@import { Injectable } from "@angular/core";

@Injectable()
export class HeaderAndSideBarService {
    public testFunction() {
       console.log('value');
    }
}

要使用该服务，请在标头和侧边栏组件中都提供它：

import { Component, OnInit, Input,ViewChild } from '@angular/core';
import { HeaderAndSideBarService } from "./header-and-sidebar.service";

@Component({
    ...,
    providers: [HeaderAndSideBarService]
})
export class HeaderComponent {
    constructor(private service: HeaderAndSideBarService ) { }

    ngOnInit() {
      this.service.testFunction();
    }
}

标题和侧栏组件角度6中的功能共享

3 个答案: