web-dev-qa-db-ja.com

Angular 2コンストラクタにパラメータを渡すとDI例外がスローされます

コンストラクタのコンポーネントに文字列プロパティを設定したいのですが、このようなことをしようとすると

@Component({
    selector: 'wg-app',
    templateUrl: 'templates/html/wg-app.html'
})
export class AppComponent {

    constructor(private state:string = 'joining'){

    }
}

DI例外が発生する

    EXCEPTION: No provider for String! (AppComponent -> String)

明らかに、インジェクターは「文字列」プロバイダーを見つけようとしているため、見つけることができません。

このタイプのものにはどのようなパターンを使用する必要がありますか？例えば。コンポーネントに初期パラメータを渡す。

避けるべきですか？最初の文字列を挿入する必要がありますか？

angularangular2-directives
9
Simon Trewhella

@Input()プロパティを使用できます。

<my-component [state]="'joining'"></my-component>

export class AppComponent {
  @Input() state: string;
  constructor() { 
    console.log(this.state) // => undefined
  }
  ngOnInit() {
    console.log(this.state) // => 'joining'
  }
}

コンストラクタは通常、DIにのみ使用する必要があります...

しかし、本当に必要な場合は、注入可能な変数 （（plunker） を作成できます。

let REALLY_IMPORTANT_STRING = new OpaqueToken('REALLY_IMPORTANT_STRING');
bootstrap(AppComponent, [provide(REALLY_IMPORTANT_STRING, { useValue: '!' })])

export class AppComponent {
  constructor(@Inject(REALLY_IMPORTANT_STRING) public state: REALLY_IMPORTANT_STRING) { 
    console.log(this.state) // => !
  }
}

最も簡単なオプションは、クラスプロパティを設定することです。

export class AppComponent {
  private state:string = 'joining';
  constructor() { 
    console.log(this.state) // => joining
  }
}

@Markが指摘したように、別のオプションはサービスを使用することです：

export class AppService {
  public state:string = 'joining';
}
export class AppComponent {
  constructor(private service: AppService) { 
    console.log(this.service.state) // => joining
  }
}
19
Sasxa