2017-09-29 6 views
0

入力バインディングを使用して、親コンポーネントから子コンポーネントにデータを渡そうとしています。これは単純なブール値フィールドです。私はそれを達成するためにこの角度のtutorialに従ったが、私はまだ親から子のコンポーネントに何かを得ることができません。入力バインディングを使用して親コンポーネントから子コンポーネントにデータを渡す際にエラーが発生しました

また、その価値があるかどうかわかりませんが、まずは以下のエラーが発生しました。次に、私のアプリケーションモジュールに[NO_ERRORS_SCHEMA]というスキーマを追加しました。

public isAnAuthorizedUser: boolean = true; 

    ngOnInit(): void { 

     if (test != null) { 
      console.log("Inside NGOnInit on page 1"); 
      this.route.params 
       .switchMap((params: Params) => this._Service.getRequestById(+params['id'])) 
       .subscribe(
       data => { 
        this.Model = data; 
        if (this.Model.isAuthorizedToView != true) 
        { 
         this.isAnAuthorizedUser = false; 
         this._router.navigate(['/dashboard']); 
        } 
     } 

は、ここで私が通過しようとしている私の親コンポーネントのhtmlです: enter image description here

以下は、私が渡したい変数のための私の親component.tsコードです。以下は

<div> 
       <isAnAuthorizedUser [data]="isAnAuthorizedUser"></isAnAuthorizedUser> 
      </div> 

私の子コンポーネントのTSファイルのコードです:

以下
import { Component, OnInit, Input, Injectable, ViewChild } from '@angular/core' 
import { 
    FormsModule, 
    ReactiveFormsModule, 
    FormGroup, 
    FormControl 
} from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 

@Component({ 
    moduleId: module.id, 
    selector: 'ReservationFormPage1', 
    templateUrl: './ReqDashboard.html' 
    , 
    providers: [ReqFormService, CompleteRequestService, IncompleteRequestService] 
}) 

export class ReservationDashboardComponent implements OnInit { 

    @Input() 
    isAnAuthorizedUser: boolean; 
       ngOnInit(): void { 
        console.log(this.isAnAuthorizedUser); 
    } 

} 

は私がvarianbleに私のパスにアクセスするためにテストしていたHTMLコードです:

<div *ngIf ="isAnAuthorizedUser"> 
     <span>{{this.isAnAuthorizedUser}}</span> 
    </div> 
+0

を? – n00dl3

+0

@ n00dl3だからあなたは何を提案していますか?説明してください –

+0

どこにも追加しないで要素をhtmlに追加しました。 –

答えて

0

プロパティ名にhtmlは@Inputプロパティ名の名前と一致する必要があります。

あなたのコンポーネントで行う必要があり、以下の

<isAnAuthorizedUser [isAnAuthorizedUser]="isAnAuthorizedUser"></isAnAuthorizedUser> 
0

を試してみてください。

@Input('data') isAnAuthorizedUser; 

してから、テンプレート内

この ` `要素から来たん
<isAnAuthorizedUser [isAnAuthorizedUser]="true"></isAnAuthorizedUser> 
関連する問題