ionic2 angular2 add graph component (with its own

问题:

In Ionic2 / Angular2: I try to figure out how to add a graph with its own selector to a page.

Starting from the Ionic2 tutorial project I added 2 elements: "MyPage" and "MyGraphDiagram". And I want to use "MyGraphDiagram" in "MyPage".

In "[MyProject]/src/app/app.module.ts" I have:

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: Here if I compile the project it has a problem with MyGraphDiagram in the declartions node (also I thought I had implemented MyGraphDiagram correctly).

In [MyProject]/src/app/app.component.ts, it stays the same except that the page to root is substitued with: rootPage: any=MyPage.

In "[MyProject]/src/pages/my/graph-components/my-graph.ts" (it is a copy of this thread):

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

Then finally under "[MyProject]/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){

    }
}

And "[MyProject]/src/pages/my/my.html":

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

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

If I run a CLI "ionic run android": If I leave MyGraphDiagram in the declaration node of "[MyProject]/src/app/app.module.ts", the lint part doesn't go thru. it throws an error:

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

If I take MyGraphDiagram of the declartion node, the lint part goes thru but build throw that error:

'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'

Some update: If I run a CLI "ionic serve":

The TypeScript Transpile fails with this error:

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

回答1:

First, remove MyGraphDiagram from entryComponents and leave it on declarations in app.module.ts.

Then, update the MyGraphDiagram component to follow RC1 standard, using an html template and removing the @view part.

回答2:

Which version of ionic do you use? @view is deprecated, you can just define you component like: @Component({ selector: 'my-graph', template: `<canvas #myGraph class='myGraph' [attr.width]='_size' [attr.height]='_size'></canvas>` }) export class MyGraphDiagram { ...