Question

我有一个带有NgBModal弹出窗口的组件。我如何从任何其他组件中引用他的参考文献？

组件弹出：

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>

此代码不起作用，我不知道，我怎么能调用窗口.. @ViewChild也许？但我尝试使用@ViewChild并未导致工作结果。

Answer 1

我认为你混淆了template input variables和template reference variables。

如果您定义模板引用变量，例如#feedbackModal，请记住其范围仅限于模板。

您无法像尝试一样将其访问到组件中。

我认为@ViewChild是正确的方法。我发布一个示例来引用子视图，基于角度6 Tour of heroes教程：

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>

DashboardComponent

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，然后您可以添加ViewChild类型ElementRef来定位您的标记。

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

从另一个组件Angular 6 + NgbModal Bootstrap中的组件调用引用#name

1 个答案: