角度7-在另一个零部件中注入零部件 [英] Angular7 - Inject Component in another Component

问题描述

在另一个组件中注入组件以访问注入组件中的函数或属性是否正确？
注意：这些组件都不是其他组件的子级

import { UsersComponent } from './../users/users.component';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(users:UsersComponent){
    users.getAllUsers()
  }
}

推荐答案

您实际上不能这样做。在角度上，我们认为一切都是一个组件。如果任何方法或属性被多个组件使用，您可以遵循以下方法。因为您的组件不作为子父组件相关。您可以遵循3种和4种方法。

1.父对子、子对父：通过@输入和@输出共享数据

这是在组件之间共享数据最常用的方式。它使用@Input()修饰符。您还可以使用@Output()修饰符将事件传递给父级。

parent.Component.ts：

@Component({
  selector: 'app-parent',
  template: `
    <p>{{ message }}</p>
    <app-child [input]="parentData" (output)="childMsg($event)"></app-child>`
})
export class ParentComponent{
  message: string;
  parentData = "message from parent"
  childMsg(event) {
    this.message = event;
  }
}

子组件.ts：

@Component({
  selector: 'app-child',
  template: `
    <p>{{ input }}</p>
    <button (click)="submit()">Submit</button>
  `
})
export class ChildComponent {

  @Input() input: string;
  @Output() output = new EventEmitter<string>();
  message: string = "Hello World!"
  submit() {
    this.output.emit(this.message)
  }
}

2.子代到父代：通过查看子代共享数据

@ViewChild修饰器允许将一个组件注入到另一个组件中，从而使父级可以访问其属性和方法。

parent.Component.ts

@Component({
  selector: 'app-parent',
  template: `
    Message: {{ childData }}
    <app-child></app-child>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements AfterViewInit {

  @ViewChild(ChildComponent) child;    

  childData: string;

  ngAfterViewInit() {
    this.childData = this.child.message
  }
}

子组件.ts：

@Component({
  selector: 'app-child',
})
export class ChildComponent {

  childData = 'Hola Mundo!';

}

注意：我们使用AfterViewInit生命周期，因为在初始化视图之前，子级不可用。

3.使用服务的无关组件：在具有服务和行为主体的无关组件之间共享数据

Common.service.ts：

@Injectable()
export class CommonService {
  private data = new BehaviorSubject('default data');
  data$ = this.data.asObservable();

  changeData(data: string) {
    this.data.next(data)
  }
}

Component-one.Component.ts：

@Component({
  selector: 'app-component-one',
  template: `<p>{{data}}</p>`
})
export class ComponentOneComponent implements OnInit {

  data: string;

  constructor(private service: CommonService) { }

  ngOnInit() {
    this.service.data$.subscribe(res => this.data = res)
  }

}

Component-Two.Component.ts：

@Component({
  selector: 'app-component-two',
  template: `
    <p>{{data}}</p>
    <button (click)="newData()">Next Data</button>`
})
export class ComponentTwoComponent implements OnInit {

  data: string;

  constructor(private service: CommonService) { }

  ngOnInit() {
    this.service.data$.subscribe(res => this.data = res)
  }
  newData() {
    this.service.data.next('Changed Data');
  }
}

4.状态管理：使用NgRx在不相关的组件之间共享数据 你可以使用像NgRx这样的商店来管理你将存储你的财产的状态，然后在任何地方使用。Example我在学习ngrx时遵循了这个示例。

这篇关于角度7-在另一个零部件中注入零部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！