Обмен данными между компонентами с использованием Сервиса

rds80 спросил: 07 октября 2018 в 01:14 в: angular

После того, как пользователь выбирает элемент навигации из раскрывающегося списка, соответствующие детали элемента навигации должны заполняться с помощью текстовых полей.

У меня есть компонент навигации, который используется для создания раскрывающегося списка. список и компонент навигационной детализации для заполнения текстовых полей. Сейчас я просто хочу показать одно из свойств навигации в компоненте навигация-подробности. Я использую сервис, чтобы передать навигацию, выбранную из раскрывающегося списка, компоненту навигационных подробностей.

В методе navigation-detail.component.ts ngAfterViewInit я могу войти в консоль любое из свойств элемента навигации. Однако, когда я пытаюсь сделать то же самое на navigation-detail.component.html, появляется следующая ошибка:

Невозможно прочитать свойство 'NavName' из неопределенного.

Вот код: navigation.component.html

<mat-form-field>
  <mat-select placeholder="navigations" >
  <mat-option (click)="sendChangedNav(nav)" *ngFor="let nav of navigations" [value]="nav.Id">
    {{nav.NavName}}
  </mat-option>
</mat-select>
</mat-form-field>
<app-navigation-detail></app-navigation-detail>

navigation.component.ts
import { Component, OnInit, AfterViewInit, Input } from '@angular/core';
import { NavigationService } from '../navigation.service';
import { INavigation } from '../INavigation';
import { ShareAppIDService } from '../share-app-id.service';
import { ShareNavigationService } from '../share-navigation.service';@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.css']
})
export class NavigationComponent implements AfterViewInit {
  navigations: Array<INavigation>;  constructor(private navigationService: NavigationService, private shareAppIdService: ShareAppIDService,
    private sharedNavService: ShareNavigationService) { }  ngAfterViewInit() {
    this.shareAppIdService.appIdChanged.subscribe((appId) => {
      this.navigationService
        .getNavigations(appId)
        .subscribe(data => {this.navigations = data; });
        console.log(appId);
    });
  }  sendChangedNav(nav) {
    this.sharedNavService.changeNavigation(nav);
  }
}
навигационная-detail.component .html
{{navigation.NavName}}

навигационные-detail.component.ts
import { Component, OnInit, Input, AfterViewInit } from '@angular/core';
import { ValueTransformer } from '@angular/compiler/src/util';
import { INavigation } from '../INavigation';
import { ShareNavigationService } from '../share-navigation.service';@Component({
  selector: 'app-navigation-detail',
  templateUrl: './navigation-detail.component.html',
  styleUrls: ['./navigation-detail.component.css']
})
export class NavigationDetailComponent implements AfterViewInit {
  navigation: INavigation;  constructor(private sharedNavService: ShareNavigationService) { }  ngAfterViewInit() {
    this.sharedNavService.navigationChanged.subscribe((navigation) => {
      this.navigation = navigation;
      console.log('navigation detail id is: ' + navigation.NavPageURL);
    });
  }}
разделяемые-navigation.component.service.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { INavigation } from './INavigation';@Injectable({
  providedIn: 'root'
})
export class ShareNavigationService {  constructor() { }  private navigation = new Subject<INavigation>();
  public navigationChanged = this.navigation.asObservable();  public changeNavigation(value) {
    this.navigation.next(value);
    console.log('navigation from changeNavigation service is ' + value);
  }
}

0 ответов