时间戳

首页 > 解决方案 > 如何在 Angular 7 中从其他组件调用组件

html - 如何在 Angular 7 中从其他组件调用组件

问题描述

我有一个复选框，如果选中该复选框，我需要在加载应用程序时显示警报消息。但问题是复选框在标题组件中，它与主组件链接。所以当我在主页时，如果那个复选框被选中，我需要在加载应用程序时显示警报消息。这是下面的代码，

header.component.html

<div><input checked type="checkbox">Other-component</div>

header.component.ts

import { Component, OnInit } from '@angular/core';
import { Router }  from "@angular/router";

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

    constructor(public router: Router){} 

    ngOnInit() {}
}

home.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import Speech from 'speak-tts';
import { RxSpeechRecognitionService, resultList, } from '@kamiazya/ngx-speech-recognition';

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css'],  
    providers: [ RxSpeechRecognitionService ]
})
export class HomeComponent implements OnInit {  
    showit:any;
    nestedjson:any;
    constructor(private formBuilder: FormBuilder,public service: RxSpeechRecognitionService) {
    }

    ngOnInit() {

    } 
}

标签： htmlangulartypescript

解决方案

1）标题中的问题：如何从其他组件调用组件

您可以在主模板中为标题组件提供一个参考 id。

<app-header #header></app-header>

然后，您可以通过主组件中的 ViewChild 访问标题组件。

@ViewChild('header') headerComponent: HeaderComponent;

但这对于您的需求似乎不是很好的做法。考虑使用服务并使用 RxJs Observables 订阅主题。或者在您的情况下更简单：只需使用双向数据绑定。

2）组件之间实际通信的方式：双向数据绑定

header.component.ts

export class HeaderComponent implements OnInit {

  @Input() isChecked: boolean;
  @Output() isCheckedChanged = new EventEmitter<boolean>();

  constructor(public router: Router){} 

  ngOnInit() {
  }

}

header.component.html

<input [(ngModel)]="isChecked" type="checkbox">

home.component.ts

export class HomeComponent implements OnInit {

  isChecked: boolean;

  constructor() {}

  ngOnInit() {
  } 
}

home.component.html

<app-header [(isChecked)]="isChecked"></app-header>

编辑：在您的情况下，您也不需要双向绑定，因为您不需要来自 HeaderComponent 的任何反馈。一种数据绑定方式就可以了。然后你可以删除线

@Output() isCheckedChanged = new EventEmitter<boolean>();

并且在 Home 模板中不要在框语法 [()] 中使用香蕉，而只需使用 []：

<app-header [isChecked]="isChecked"></app-header>

推荐阅读