ionic2 angular2ページに<strong>Ionic2/Angular2</strong>で

Question

を（独自のセレクタ付き）グラフコンポーネントを追加します。私は、ページへの自身のセレクタでグラフを追加する方法を理解してみてください。

Ionic2のチュートリアルプロジェクトから、「MyPage」と「MyGraphDiagram」の2つの要素を追加しました。そして、私は "MyPage"で "MyGraphDiagram"を使いたいと思っています。 "[MyProjectと] /src/app/app.module.ts" で

私が持っている：

import ... 
import { MyPage } from '../pages/my/my'; 
import { MyGraphDiagram } from '../pages/my/graph-components/my-graph'; 
@NgModule({ 
    declarations: [ 
    MyApp, 
    HelloIonicPage, 
    ItemDetailsPage, 
    ListPage, 
    MyPage, 
    MyGraphDiagram 
    ], 
    imports: [ 
    IonicModule.forRoot(MyApp) 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    MyApp, 
    HelloIonicPage, 
    ItemDetailsPage, 
    ListPage, 
    MyPage, 
    MyGraphDiagram 
    ], 
    providers: [] 
}) 
export class AppModule {} 

FIRST：私はプロジェクトをコンパイルする場合はここではdeclartionsでMyGraphDiagramに問題がありますノード（MyGraphDiagramを正しく実装していると思いました）。

[MyProject] /src/app/app.component.tsでは、ルートへのページがrootPage: any=MyPageに置き換えられている点を除いて同じままです。 [MyProjectと」下の最後に続い

import {Component, View, Input, ViewChild, ElementRef} from 'angular2/core'; 

@Component({ 
    selector: 'my-graph', 
}) 
@View({ 
    template: `<canvas #myGraph class='myGraph' 
    [attr.width]='_size' 
    [attr.height]='_size'></canvas>`, 
}) 

export class MyGraphDiagram { 
    private _size: number; 

    // get the element with the #myGraph on it 
    @ViewChild("myGraph") myGraph: ElementRef; 

    constructor(){ 
     this._size = 150; 
    } 

    ngAfterViewInit() { // wait for the view to init before using the element 

     let context: CanvasRenderingContext2D = this.myGraph.nativeElement.getContext("2d"); 
     // happy drawing from here on 
     context.fillStyle = 'blue'; 
     context.fillRect(10, 10, 150, 150); 
    } 

    get size(){ 
     return this._size; 
    } 

    @Input() set size(newValue: number){ 
     this._size = Math.floor(newValue); 
    } 
} 

"[MyProjectと] /src/pages/my/graph-components/my-graph.ts"（このthreadのコピーである）で

/src/pages/my/my.ts "：

import {Component} from '@angular/core'; 
import { NavController, NavParams } from 'ionic-angular'; 

import { MyGraphDiagram } from '/graph-component/my-graph' 


@Component({ 
    selector:'my-page', 
    template: 'my.html' 
}) 
export class MyPage { 
    constructor(public navCtrl: NavController, public navParams: NavParams){ 

    } 
} 

そして "[MyProjectと] /src/pages/my/my.html"：

<ion-header>... 
</ion-header> 

<ion-content> 
    <my-graph></my-graph> 
</ion-content> 

"[MyProject] /src/app/app.module.ts"のdeclarationノードにMyGraphDiagramを残した場合、lintの部分は実行されません。私はdeclartionノードのMyGraphDiagramを取る場合は、糸くずの一部はスルー行く

Error: Unexpected value 'MyGraphDiagram' declared by the module 'AppModule'

が、そのエラーをスロー構築：それはエラーがスローされます

'my-graph' is not a known element:

[00:08:06] 1. If 'my-graph' is an Angular component, then verify that it is part of this module. [00:08:06] 2. If 'my-graph' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema'

いくつかのアップデート： を私はCLIを実行した場合」イオン「サーブ：

活字体Transpileは、このエラーで失敗します。

it cannot find name 'ElementRef'
L13: myGraph: ElementRef;

Answer 1

まず、entryComponentsからMyGraphDiagramを削除し、app.module.tsでの宣言にそれを残します。

次に、HTMLテンプレートを使用して@view部分を削除して、MyGraphDiagramコンポーネントをRC1標準に従って更新します。

Answer 2

使用しているイオンのバージョンは？ @viewが廃止されて、あなたはちょうどあなたがコンポーネントのように定義することができます。 @Component({ selector: 'my-graph', template: `<canvas #myGraph class='myGraph' [attr.width]='_size' [attr.height]='_size'></canvas>` }) export class MyGraphDiagram { ...