ionic2 angular2添加图组件（具有自己的选择器）到页面 [英] ionic2 angular2 add graph component (with its own selector) to a page

问题描述

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

从Ionic2教程项目开始，我添加了两个元素：MyPage和MyGraphDiagram。

在[MyProject] /src/app/app.module.ts中，我使用了MyGraphDiagram ：

  import ... 
 import {MyPage} from'../pages/my/my'; 
 import {MyGraphDiagram} from'../pages/my/graph-components/my-graph'; 
 @NgModule（{
）声明：[
 MyApp，
 HelloIonicPage，
 ItemDetailsPage，
 ListPage，
 MyPage，
 MyGraphDiagram 
]，
 import：[
 IonicModule.forRoot（MyApp）
]，
 bootstrap：[IonicApp]，
 entryComponents：[
 MyApp，
 HelloIonicPage，
 ItemDetailsPage，
 ListPage，
 MyPage，
 MyGraphDiagram 
]，
 providers：[] 
} ）
 export class AppModule {} 
  

FIRST ：我编译项目它有一个问题在MyGraphDiagram在declartions节点（也我认为我已经实现MyGraphDiagram正确）。

在[MyProject] / src / app / app .component.ts，除了使用 rootPage：any = MyPage 。

在[MyProject] /src/pages/my/graph-components/my-graph.ts（它是此）：

  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; 
 
 //获取带有#myGraph的元素
 @ChildChild（myGraph）myGraph：ElementRef; 
 
 constructor（）{
 this._size = 150; 
} 
 
 ngAfterViewInit（）{//在使用元素之前等待视图初始化
 
 let context：CanvasRenderingContext2D = this.myGraph.nativeElement.getContext 2d）; 
 //从这里开始绘制
 context.fillStyle ='blue'; 
 context.fillRect（10，10，150，150）; 
} 
 
 get size（）{
返回this._size; 
} 
 
 @Input（）set size（newValue：number）{
 this._size = Math.floor（newValue）; 
} 
} 
  

然后最后在[MyProject] / src / pages /my/my.ts：

  import {component} from'@ angular / core'; 
 import {NavController，NavParams} from'ionic-angular'; 
 
从'/ graph-component / my-graph'导入{MyGraphDiagram} 
 
 
 @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> 
  

如果我运行CLI离子运行android：
如果我在[MyProject] /src/app/app.module.ts的声明节点中留下MyGraphDiagram，则 lint 不要去。它会抛出一个错误：

错误：模块声明的意外值'MyGraphDiagram'
'AppModule'

如果我使用 declartion 节点的MyGraphDiagram，lint部分通过，但build错误：

'my-graph'不是已知元素：

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

< blockquote>

一些更新：
如果我运行CLI离子服务：

TypeScript Transpile失败，出现此错误：

它找不到名称'ElementRef'

L13：myGraph：问题是：我设置了一个文件夹来包含我的绘图内容，下面是一个文件夹，这个文件夹包含一个文件夹，包含我的页面的文件夹。

在../pages/my/graph-components/my-graph而不是../pages/my中拥有MyGraphDiagram -graph'是一个问题。由于某种原因Ionic2（v2.1.0）不喜欢。

我也添加类型的问题无法解决CLInpm install。

我也遵循@Malvarn提供的提示：take away @View和@jriebab将html模板放在节点 templateUrl 模板在 @Component ）并从 entryComponents 中删除​​ MyGraphDiagram ，并将其保留在声明 inapp.module.ts。

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;

解决方案

The issue was that: I set a folder to contain my drawing content beneath the folder that containt my page.

Having MyGraphDiagram in '../pages/my/graph-components/my-graph' instead of '../pages/my-graph' was a problem. For some reason Ionic2 (v2.1.0) doesn't like it.

I also add issue of type not recognized solved by CLI "npm install".

I also followed the tip given by @Malvarn: "take away @View" and @jriebab to put the html template in the node templateUrl instead of template within @Component (not sure that last one is relevant but it seems to be Ionic2 best practice) and remove MyGraphDiagram from entryComponents and leave it on declarations in "app.module.ts".

这篇关于ionic2 angular2添加图组件（具有自己的选择器）到页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！