Вызовите номер ссылки из другого компонента Angular 6 + NgbModal Bootstrap - PullRequest
Новая
       34

Вызовите номер ссылки из другого компонента Angular 6 + NgbModal Bootstrap

0 голосов
/ 29 мая 2018

У меня есть компонент с всплывающим окном 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 не привели к рабочему результату.

1 Ответ

0 голосов
/ 29 мая 2018

Я думаю, что вы путаете входные переменные шаблона и переменные ссылки на шаблон .

Если вы определяете переменную ссылки на шаблон, такую ​​как #feedbackModal, имейте в виду, что ее область действияограничен шаблоном.

Вы не можете получить к нему доступ в компоненте, как пытаетесь.

Я думаю, @ViewChild - правильный путь.Я публикую пример для ссылки на детское представление, основанное на угловых уроках 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

...