2017-11-14 5 views
0

私はTypescriptでAngular 2アプリケーションを持っています。私は、親クラスから子クラスにアクセスする方法を知っています。どのようにして、親クラスが角度2の子クラスにアクセスできるようにすることができますか?

親クラスは、このようなものです:

@Component({ 
    selector: 'all-data-page', 
    templateUrl: './all-data-page.component.html', 
    styles: [require('./all-data-page.style.scss')] 
}) 
export class AllDataPageComponent implements OnInit { 
... 
} 

そのセレクタは次のようになります。

<all-data-page [allData]="results.top3.Rows" type="Safeguards" *ngIf="!!results.AllDataSafeguards"> 
</all-data-page> 

子は次のようになります。

@Component({ 
    selector: 'all-data-row', 
    templateUrl: './all-data-row.component.html', 
    styles: [ require('./all-data-row.style.scss') ], 
    encapsulation: ViewEncapsulation.None 
}) 
export class AllDataRowComponent implements OnInit { 
... 
} 

、そのセレクタは、このようになります:

<div class="data-list"> 
     <all-data-row *ngFor="let item of categoryRows; let last=last" 
         relativeWidth="100" 
         [item]="item.chartData" 
         [last]="last" 
         [ChartLabel]="item.chartData.ChartLabel" 
         [acmCat1]="item.chartData.acmCat1" 
         [acmCat2]="item.chartData.acmCat2" 
         [acmCat3]="item.chartData.acmCat3" 
         [acmCat4]="item.chartData.acmCat4" 
         [acmCat5]="item.chartData.acmCat5" 
         (click)="selectCategory(item.fullObject)" 
         [selected]="selected"> 
     </all-data-row> 
    </div> 

子クラスを親クラスから参照する方法を知りたいと思います。

Googleに出てくるさまざまなサイトは、@ViewChildrenの使用を提案していますが、それは私のためには機能しません。 Chromeコンソールでは、「ViewChildrenが定義されていません」と表示されます。

親クラスを子クラスにアクセスさせるにはどうすればよいですか?

ありがとうございました。

+0

あなたのコードは '@ViewChildren()'の使い方を示していません。https://stackoverflow.com/questions/32693061/how-can-i-select-an-element-in-a-component-templateを参照してください。/35209681#35209681詳細について –

+0

子クラスそのものまたは子のHTMLのコンテンツにアクセスしようとしていますか? –

+0

子クラス自体。 HTMLには必ずしも存在しない変数が含まれています。これは、ツールチップを動的に挿入するために使用されます。ユーザーアクションに基づいてツールチップのテキストを更新したいが、ユーザーがそのアクションを実行したときにツールチップがページに表示されない。 – gib65

答えて

0

私は@ViewChildrenを使用していません。私が使用@ViewChildrenをDID(およびエラーを得た)とき、私はそうのようにそれをやった:

@Component({ 
    selector: 'all-data-page', 
    templateUrl: './all-data-page.component.html', 
    styles: [require('./all-data-page.style.scss')] 
}) 
export class AllDataPageComponent implements OnInit { 
@ViewChildren(AllDataRowComponent) AllDataRowComponent : safeguardRow; 
... 
} 

私はあなたが提供されたリンクと同じエラーを取得します。

関連する問題