Question

我试图通过服务中的getter / setter将组件上设置的变量传递给父组件。正确应用了setter，但getter返回undefined。

下面的代码是从我正在处理的另一个项目中删除的，这个代码很好，所以我不确定它为什么不在这里工作。

我只需要传递在子组件上设置的pageTitle，将其传递给父组件以在其HTML中显示。

父组件

TS：styleguide.component.ts

import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { StyleguideService } from './styleguide.service';

@Component({
  selector: 'styleguide',
  templateUrl: './styleguide.component.html',
  host: {'class': 'route'},
})
export class StyleguideComponent {

  constructor( private ss: StyleguideService ) {}
}

相关HTML：styleguide.component.html

<a [routerLink]="[]" aria-current="page" class="crumbs__link crumbs__link--active" [title]="ss.pageTitle">{{ss.pageTitle}}</a>

家长模块： styleguide.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { StyleguideService } from './styleguide.service';
import { StyleguideComponent } from './styleguide.component';
import { TemplatesComponent } from './templates/templates.component';
...

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ...
  ],
  declarations: [
    StyleguideComponent,
    TemplatesComponent,
    ...
  ],
  exports: [
    ...
  ],
  providers: [
    StyleguideService
  ]
})
export class StyleguideModule {}

服务： styleguide.service.ts

import { Injectable } from '@angular/core';

@Injectable()   
export class StyleguideService {
  pageTitleS: string;

  get pageTitle(): string {
    console.log('get title: ', this.pageTitleS); // <-- Returns undefined
    return this.pageTitleS;
  }
  set pageTitle(s: string) {
    console.log('set title: ', s);
    this.pageTitleS= s;
  }
}

子组件： templates.component.ts

import { Component } from '@angular/core';
import { StyleguideService } from '../styleguide.service';

@Component({
  selector: 'templates',
  templateUrl: './templates.component.html',
  host: {'class': 'route__content'}
})
export class TemplatesComponent {
  constructor( private ss: StyleguideService ) {
    this.ss.pageTitle = "Templates";
  }
}

Answer 1

永远不会打电话给你的二传手。您使用StyleguideComponent实例化服务，而不是调用setter的TemplatesComponent，StyleguideComponent的构造函数不会调用服务上的setter，这就是值未定义的原因。< / p>

TemplatesComponent有一个元素选择器templates，我在问题中的styleguide.component.html中没有看到，这就是为什么我认为永远不会创建TemplatesComponent的原因。

Answer 2

您没有在child.component.ts中调用setter函数，而是设置变量的值，但我认为您错误地访问它，因为您错过了变量名中的最后一个S。你应该做的

export class TemplatesComponent {
  constructor( private ss: StyleguideService ) {
    this.ss.pageTitle("Templates");
    // Now to get it you should call
    this.ss.pageTitle(); // Should console.log the value
  }
}

Answer 3

您应该使用Observables实现服务。一个简单的例子是这样的：

import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import {Injectable} from '@angular/core'

@Injectable() 
export class Service {
  private value: BehaviorSubject<string>; 

  constructor() {
    this.value = <BehaviorSubject<string>>new BehaviorSubject();
  }
  setValue(value=""){
    this.value.next(value);
  }
  getValue() {
    return this.value.asObservable();
  }
}

父组件会像这样订阅它：

import {Component, OnInit} from '@angular/core'
import { Service } from './service';
@Component({
  selector: 'parent-component',
  template: `
    <div>
      <h2>Value {{value}}</h2>
      <child-component></child-component>
    </div>
  `,
})
export class ParentComponent implements OnInit {
  value:string;
  constructor(private service: Service) {
  }
  ngOnInit(){
    this.service.getValue().subscribe((newValue)=>{
      this.value = newValue;
    })
  }
}

Child Component会设置值并同样订阅它：

import {Component, OnInit} from '@angular/core'
import { Service } from './service';
@Component({
  selector: 'child-component',
  template: `
    <div>
      <h2>Child Value {{value}}</h2>
    </div>
  `,
})
export class ChildComponent implements OnInit {
  value:string;
  constructor(private service: Service) {
    this.service.setValue('New Value');
  }
  ngOnInit(){
    this.service.getValue().subscribe((newValue)=>{
      this.value = newValue;
    })

  }
}

Answer 4

好的，这与我的路由设置有关，我没有正确设置我的子路由，所以这实际上与getter / setter无关。

Angular：Getter / Setter - Getter返回undefined

4 个答案: