Question

在 Ionic2 / Angular2 中：我试图弄清楚如何将自己的选择器添加到页面中。

从Ionic2教程项目开始，我添加了两个元素：＆＃34; MyPage＆＃34;和＃34; MyGraphDiagram＆＃34;。我想使用＆＃34; MyGraphDiagram＆＃34;在＆＃34; MyPage＆＃34;。

In＆＃34; [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中，它保持不变，只是将root页面替换为：rootPage: any=MyPage。

In＆＃34; [MyProject] /src/pages/my/graph-components/my-graph.ts" （它是此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);
    }
}

然后最后在＆＃34; [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){

    }
}

和＆＃34; [MyProject] /src/pages/my/my.html"：

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

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

如果我运行CLI＆＃34;离子运行android＆＃34;： 如果我将MyGraphDiagram留在＆＃34; [MyProject] /src/app/app.module.ts"的declaration节点中， lint 部分不会出现通。它会抛出一个错误：

错误：意外的值＆＃39; MyGraphDiagram＆＃39;由模块声明＆＃39;的AppModule＆＃39;

如果我接受declartion节点的MyGraphDiagram，则lint部分通过但是构建抛出该错误：

＆＃39;我的-图表＆＃39;不是一个已知元素：

[00:08:06] 1.如果＆＃39; my-graph＆＃39;是一个Angular组件，然后验证   它是这个模块的一部分。 [00:08:06] 2.如果＆＃39; my-graph＆＃39;是一个   Web组件然后添加＆＃34; CUSTOM_ELEMENTS_SCHEMA＆＃34;到了   ＆＃39; @ NgModule.schema＆＃39;

一些更新： 如果我运行CLI＆＃34;离子服务＆＃34;：

TypeScript Transpile失败并显示以下错误：

找不到姓名＆＃39; ElementRef＆＃39;
L13：myGraph：ElementRef;

Answer 1

您使用哪种版本的离子？不推荐使用@view，您可以将组件定义为： @Component({ selector: 'my-graph', template: `<canvas #myGraph class='myGraph' [attr.width]='_size' [attr.height]='_size'></canvas>` }) export class MyGraphDiagram { ...

Answer 2

首先，从entryComponents中删除MyGraphDiagram并将其保留在app.module.ts中的声明中。

然后，更新MyGraphDiagram组件以遵循RC1标准，使用html模板并删除@view部分。

ionic2 angular2将图形组件（带有自己的选择器）添加到页面

2 个答案: