角度：Getter / Setter-Getter返回未定义

Question

I'm trying to pass a variable that is set on a component, to the parent component via a getter/setter in a service. The setter is applied correctly, but the getter returns undefined.

The below code was pulled out of another project I work on that does just fine with this code so I'm not sure why it isn't working here.

I simply just need to pass the pageTitle that is set on the child component, pass it to the parent component to display in its HTML.

Parent Component

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 ) {}
}

Relevant HTML: styleguide.component.html

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

Parent Module: 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 {}

Service: 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;
  }
}

Child Component: 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

Your setter is never called. You instantiate the service using StyleguideComponent , not the TemplatesComponent which does call the setter, and the constructor of StyleguideComponent does not call the setter on the service which is why the value remains undefined.

The TemplatesComponent has an element selector templates which I do not see in the styleguide.component.html you have in the question which is why I believe TemplatesComponent is never being created.

Answer 2

You are not calling the setter function in your child.component.ts instead you are setting the value of variable but I think you are accessing it wrongly as you are missing the last S in the variable name. You should be doing

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

You should implement the Service with Observables. A quick example would be something like this:

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();
  }
}

The Parent Component would subscribe to it like so:

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;
    })
  }
}

And the Child Component would set the value and also subscribe to it like so:

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无关。