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

在Ionic2/Angular2中：我试图找出如何使用自己的选择器将图形添加到页面中

从Ionic2教程项目开始，我添加了两个元素：“MyPage”和“MyGraphDiagram”。我想在“MyPage”中使用“MyGraphDiagram”。

在“[MyProject]/src/app/app.module.ts”中，我有：

首先：在这里，如果我编译项目，它在declarations节点中的MyGraphDiagram有问题（我还认为我正确地实现了MyGraphDiagram）

在[MyProject]/src/app/app.component.ts中，它保持不变，只是根目录下的页面被替换为：

rootPage:any=MyPage

在“[MyProject]/src/pages/my/graph components/my graph.ts”中（它是此文件的副本）：

和“[MyProject]/src/pages/my/my.html”：

。。。

如果我运行CLI“ionic run android”： 如果我将MyGraphDiagram保留在“[MyProject]/src/app/app.module.ts”的

声明

节点中，lint部分不会通过。它抛出一个错误：

错误：模块声明的意外值“MyGraphDiagram” “应用模块”

如果我获取

declaration

节点的MyGraphDiagram，lint部分将通过，但build会抛出该错误：

“我的图形”不是已知元素：

[00:08:06]1。如果“我的图形”是角度分量，则验证 它是本模块的一部分。[00:08:06] 2. 如果“我的图形”是 然后Web组件将“自定义元素\模式”添加到 “@NgModule.schema”

一些更新： 如果我运行CLI“爱奥尼亚服务”：

TypeScript传输文件失败，出现以下错误：

它找不到名称“ElementRef”
L13:myGraph:ElementRef

---

你用的是哪个版本的爱奥尼亚

@view

已弃用，您只需定义以下组件即可：

@组成部分({
选择器：“我的图形”，
模板：``
})
导出类MyGraphDiagram{
...

您使用的是哪个版本的ionic？

@view

已弃用，您只需定义组件，如下所示：

@组成部分({
选择器：“我的图形”，
模板：``
})
导出类MyGraphDiagram{
...

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

---

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

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

---

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

在“[MyProject]/src/pages/my/graph components/my graph.ts”中，我在@component annotation中使用模板，并从文件顶部的import语句中删除\\@view annotation（+），使其成为：“import”{Component，Input，ViewChild，ElementRef}来自'angular2/core'；”。我仍然有错误消息：“构建错误：模块'AppModule'声明的意外值'MyGraphDiagram'”。要完成您的问题，我使用Ionic 2.1.0。感谢您的帮助，问题已解决。在“[MyProject]/src/pages/my/graph components/my graph.ts”中我在@Component annotation中使用了模板，并从文件顶部的import语句中删除了\\@view annotation+，使其成为：“从'angular2/core'；'导入{Component，Input，ViewChild，ElementRef}”。我仍然有错误消息：“on build error:模块'AppModule'声明的意外值'MyGraphDiagram'为了完成您的问题，我使用了Ionic 2.1.0。感谢您的帮助，问题已经解决。我做到了：MyGraphDiagram从条目组件中删除。然后在“[MyProject]/src/pages/my/graph components/my graph.ts”中，@component更改为：@component（{selector:'my graph'，templateUrl:'my graph.html'}）`新文件：“[MyProject]/src/pages/my/graph components/my graph.html”with:

。在CLI和TSC--watch中运行时，我仍然得到：“它找不到名称'ElementRef'L13:myGraph:ElementRef；”我明白了。现在，您可以删除视图中的类型：

@ViewChild（“myGraph”）myGraph；

我安装了npm（这似乎是ionic2中的魔术）并且我收到的错误消息较少。另外，似乎在页面的文件夹中包含子文件夹时出现了一些问题。项目显示但事件ngAfterViewInit（）未触发，因此在屏幕上仍然看不到形状。一些用户评论说，删除Ionic并重新安装它解决了一些与类型相关的问题，特别是如果该项目已从以前的Ionic版本升级。我将挖掘并更新我的问题，以了解我的进度。感谢提示。它使用symfony和“clean cache”记住我或者“资产重建”，如果您熟悉的话。我做了：MyGraphDiagram从条目组件中删除。然后在“[MyProject]/src/pages/my/graph components/my graph.ts”中，@组件更改为：@component（{selector:'my graph'，templateUrl:'my graph.html'）`新文件：“[MyProject]/src/pages/my/graph components/my graph.html”使用：

。在CLI Ionic serve和TSC--watch中运行时，我仍然会得到：“它找不到名称'ElementRef'L13:myGraph:ElementRef；”我明白了。现在，您可以删除视图中的类型：

@ViewChild（“myGraph”）myGraph；

我安装了npm（似乎是ionic2中的魔术）而且我收到的错误消息也较少。似乎在将子文件夹与页面的文件夹一起使用时也存在一些问题。项目将显示，但事件ngAfterViewInit（）未触发，因此在屏幕上仍然看不到形状。一些用户评论说，删除Ionic并重新安装它解决了一些与类型相关的问题，特别是如果该项目已从以前的Ionic版本升级。我将挖掘并更新我的问题，以了解我的进度。感谢提示。它使用symfony和“clean cache”记住我或者“资产重建”，如果你

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 {}

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

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){

    }
}

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

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