Angular 2 共享服务变量返回未定义

Question

我正在尝试从由 navMenu.component 设置并由 tab.component 使用的共享服务中获取值。我觉得它已正确共享，但到 tab.component 获得价值时为时已晚。我尝试使用 Elvis 运算符，但出现了一个错误。

启动 app.component.html

<div>
    <div class="outer">

            <nav-menu [gwLinkID]="gwLinkID"  [psnlUID]="psnlUID"  [ntName]="ntName"></nav-menu>


        </div>

        <div class="main">
            <div class="container">  
               <tab></tab>
            </div>
</div>

共享服务的值由 navMenu.component 设置

@Component({
    selector: 'nav-menu',
    moduleId: module.id,
    templateUrl: 'navMenu.component.html'
})

export class NavMenuComponent implements OnInit {

    tabs: INavMenuTabs[];

    @Input() gwLinkID: number;
    @Input() psnlUID: string;
    @Input() ntName: string;
    pageTitle: any[];
    title: string;
    titleID: number;
    appParams: IAppParams;
    errorMessage: string;
    linkData: any;
    constructor(private _appParams: AppParamasService, private _navMenuService: NavMenuService) {
//    this.gwLinkID = this._appParams.LinkID;
    console.log('inside navMenu.component constructor ' + this._appParams.GetLinkName);


}

getTabs() {
    this._navMenuService.getTabs(this._appParams.LinkID, 'ciiw')
        .subscribe(
        data => {
            this.tabs = data.result
        },
        error => this.errorMessage = <any>error),
        this.appParams = this._appParams.GetParams();
    console.log('inside navMenu.component method getTabs ' + this._appParams.GetLinkName);
}
ngOnInit(): void {

    this._navMenuService.getLinkName(this.gwLinkID)
        .subscribe(
        data => {
            this.titleID = data.result.LinkID;
            this._appParams.SetLinkID = data.result.LinkID;
            this.title = data.result.LinkName;
            this._appParams.SetLinkName = this.title;
            this._appParams.SetParams(this.psnlUID, this.ntName, this.gwLinkID);
            this.getTabs(); // call the tabs-method here, data is available here!
        });
    console.log('inside navMenu.component method ngOnInit ' + this._appParams.GetLinkName);
    }

}

共享服务

@Injectable()

export class AppParamasService {

    params: IAppParams;
    constructor() {

    }

    private _linkName: string;
    get GetLinkName(): string {
        return this._linkName;
    }
    set SetLinkName(value: string) {
        this._linkName = value;
    }


}

tab.component 使用共享服务方法

@Component({
    selector: 'tab',
    moduleId: module.id,
    templateUrl: 'tab.component.html'
})
export class TabComponent implements OnInit {

    linkName: string;
    appParams: IAppParams;
   constructor(private _appParams: AppParamasService) {

    console.log('inside tab.component constructor ' + this._appParams.GetLinkName);

}

CheckValue()
{
   console.log('inside tab.component CheckValue ' + this._appParams.GetLinkName);
}
ngOnInit(): void {

    this.linkName = this._appParams.GetLinkName;
    console.log('inside tab.component ngOnInt ' + this._appParams.GetLinkName);


}
}

tab.component.html

<div class="team">
       <h3 *ngIf="linkName">{{linkName}}</h3>
</div>

如果我将 navMenu.component.ts 中的构造函数更改为

构造函数（私有_appParams：AppParamasService，私有 _navMenuService: NavMenuService) {

    this._appParams.SetLinkName = 'Test';

}

一切正常，并且该值可用于 tab.component.ts，因此在哪个阶段值可用于其他组件是一个问题

控制台日志的输出

• navMenu.component 构造函数内部未定义
• tab.component 构造函数内部未定义
• navMenu.component 方法 ngOnInit 内部未定义
• tab.component ngOnInt 内部未定义
• navMenu.component 方法内部 getTabs 财务计划报告 管理员

Answer 1

由于nav component和tab component是同时初始化的，这意味着当tab component中的OnInit被执行时，来自共享服务的值还没有得到一个值发射到@ 987654326@。这可以通过使共享服务使用Subjects 来解决，以便选项卡组件将订阅该值。

所以你的服务应该是这样的：

private linkNameSource = new Subject<any>();
linkNameValue$ = this.linkNameSource.asObservable();

  linkNameReceived(linkName) {
    //emit linkName, your tab component will subscribe to this value in constructor
    this.linkNameSource.next(linkName)
  }

并在您的nav component 中更改：

this._appParams.SetLinkName = this.title;

到以下（我们将值推送到您的共享服务），这会将值发送到您的tab component，它正在订阅该值。

this._appParams.linkNameReceived(this.title)

然后在您的选项卡组件中添加以下内容：

// declare your local variable
linkName;

constructor(private _appParams: AppParamasService) {
  // subscribe to the value from the shared service
  this._appParams.linkNameValue.subscribe(linkName => {
    this.linkName = linkName;
  }
}

这应该可以解决问题！请参阅 angular.io 中的 link，其中我为您提供的同一个示例的解释比我提供的更多。

Answer 2

如果没有像

这样的以下表达式，则不能使用可选运算符

 {{foo?.bar}}

它的目的是防止父级为undefined 或null 时对属性的访问冲突。在您的示例中，您只有一个可以打印的简单对象，例如如null 或undefined。

如果链接未定义，您可能希望不呈现完整的h3。像这样的

 <h3 *ngIf="linkName">{{linkName}}</h3>