Call reference #name from component from another component Angular 6 + NgbModal Bootstrap

Question

我有一个带有 NgBModal 弹出窗口的组件 window。我如何从任何其他组件引用他的引用？

组件弹出窗口：

import {Component, Input, OnInit} from '@angular/core';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'lol-feedback',
    templateUrl: './feedback.component.html'
})
export class FeedbackComponent implements OnInit {

    private modalTitle: string;

    constructor (private modalService: NgbModal) {}
    ngOnInit() {}

    feedBack(title: string, modal) {
        this.modalTitle = title;
        this.modalService.open(modal, {centered: true});
    }
}

模板弹出窗口：

<ng-template #feedbackModal>
    <div class="modal-body">
        <h2 class="feed-title">{{modalTitle}}</h2>
    </div>
</ng-template>

另一个组件，我尝试在其中调用此弹出窗口：

import {Component, Input, OnInit, ViewChild} from '@angular/core';
import {FeedbackComponent} from '../../system/feedback/feedback.component';

@Component({
  selector: 'lol-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss']
})
export class FooterComponent implements OnInit {

    constructor(private feedBackComp: FeedbackComponent) {}

    ngOnInit() {}

    feedBack(title: string) {
        this.feedBackComp.feedBack(title, this.feedBackComp.feedbackModal);
    }

}

模板化另一个组件：

<div class="wrapper footer">
    (....)
</div>
<lol-feedback></lol-feedback>

这段代码不起作用，我不知道，我怎么才能调用 window.. @ViewChild 也许？但是我尝试使用@ViewChild 并没有得到有效的结果。

Answer 1

我觉得你很困惑 template input variables and template reference variables。

如果您定义了类似#feedbackModal 的模板引用变量，请记住它的范围仅限于模板。

您不能像您尝试的那样将它访问到组件中。

我认为@ViewChild是正确的方法。我post一个例子参考子视图，基于angular 6英雄之旅教程：

HeroSearchComponent

import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
import {Observable, ObservableLike, Subject} from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
import { HeroService } from '../hero.service';
import { Hero } from '../heroes/hero';

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

  @ViewChild('childOne')
  private elChildOne: ElementRef;

  heroes$: Observable<Hero[]>;
  private searchTerms = new Subject<string>();

  constructor(private heroService: HeroService) { }

  search(term: string): void {
    this.searchTerms.next(term);
  }

  ngOnInit() {
    this.heroes$ = this.searchTerms.pipe(

      switchMap((term: string) => this.heroService.searchHeroes(term))
    );
  }
}

HeroSearchComponent 模板

<div id="search-component">

  <h4>Hero Search</h4>

  <input #searchBox id="search-box" (keyup)="search(searchBox.value)" />

  <ul class="search-result">
    <li *ngFor="let hero of heroes$ | async">
      <a routerLink="/detail/{{ hero.id }}">{{ hero.name }}</a>
    </li>
  </ul>
</div>

<div #childOne>hi son!</div>

仪表板组件

import { Component, ViewChild, OnInit } from '@angular/core';
import { Hero } from '../heroes/hero';
import { HeroSearchComponent } from '../hero-search/hero-search.component';
import { HeroService } from '../hero.service';

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

  heroes: Hero[] = [];

  @ViewChild(HeroSearchComponent)
  private heroSearch: HeroSearchComponent;

  constructor(private heroService: HeroService) { }

  ngOnInit() {
    this.getHeroes();
  }

  getHeroes(): void {

    console.log(this.heroSearch);

    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes.slice(1, 5));
  }

}

DashboardComponent 模板

<h3>Top Heroes</h3>
<div class="grid grid-pad">
  <a *ngFor="let hero of heroes" class="col-1-4" routerLink="/detail/{{hero.id}}">
    <div class="module hero">
      <h4>{{hero.name}}</h4>
    </div>
  </a>
</div>

<app-hero-search></app-hero-search>

如您所见，您可以为您的子组件添加一个 ViewChild，然后您可以添加一个类型为 ElementRef 的 ViewChild 来定位您的标记。

如果你调试 console.log(this.heroSearch); 你可以看到在那个变量中你也可以访问 elChildOne

Call reference #name from component from another component Angular 6 + NgbModal Bootstrap

Call reference #name from component from another component Angular 6 + NgbModal Bootstrap

reference

ng-bootstrap

angular

angular6