angular4自定義組件的示例分析

這篇文章主要為大家展示了“angular4自定義組件的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“angular4自定義組件的示例分析”這篇文章吧。

在 Angular 中，我們可以使用 {{}} 插值語(yǔ)法實(shí)現(xiàn)數(shù)據(jù)綁定。

新建組件

$ ng generate component simple-form --inline-template --inline-style
# Or
$ ng g c simple-form -it -is # 表示新建組件，該組件使用內(nèi)聯(lián)模板和內(nèi)聯(lián)樣式
//會(huì)自動(dòng)為simple-form生成simple-form.component.ts文件，文件中的selector為：app-simple-form,自動(dòng)添加了app-前綴

輸出:

installing component
 create src/app/simple-form/simple-form.component.spec.ts // 用于單元測(cè)試
 create src/app/simple-form/simple-form.component.ts // 新建的組件
 update src/app/app.module.ts //Angular CLI 會(huì)自動(dòng)更新 app.module.ts 文件。把新建的組件添加到 NgModule 的 declarations

數(shù)組中

app.module.ts更新后：

@NgModule({
 declarations: [
  AppComponent,
  SimpleFormComponent
 ],
 ...
})
export class AppModule { }

創(chuàng)建 UserComponent 組件

import { Component } from '@angular/core';

@Component({ //Component 裝飾器來(lái)定義組件的元信息
 selector: 'sl-user',
 template: `
  <h3>大家好，我是{{name}}</h3>
  <p>我來(lái)自<strong>{{address.province}}</strong>省,
   <strong>{{address.city}}</strong>市
  </p>
　　 <p>{{address | json}}</p>//Angular 內(nèi)置的 json 管道，來(lái)顯示對(duì)象信息
`, }) 

//定義組件類

export class UserComponent { 
　　name = 'name'; 
　　address = { province: 'province', city: 'city' } 
}


//使用構(gòu)造函數(shù)初始化數(shù)據(jù)
export class UserComponent {
  name: string;
  address: any;
  constructor() {
    this.name = 'name';
    this.address = {
      province: 'province',
      city: 'city'
    }
  }
}

//接口使用
interface Address {
  province: string;
  city: string;
}
export class UserComponent {
  name: string;
  address: Address;
  constructor(){
　　　　this.name = 'name';
　　　　this.address = {
　　　　　　province: 'province',
　　　　　　city: 'city'
　　　　}
　　}
}

定義數(shù)據(jù)接口（ TypeScript 中的接口是一個(gè)非常靈活的概念，除了可用于對(duì)類的一部分行為進(jìn)行抽象以外，也常用于對(duì)「對(duì)象的形狀（Shape）」進(jìn)行描述。）

interface Person {
 name: string;
 age: number;
}

let semlinker: Person = {
 name: 'semlinker',
 age: 31
};

聲明 UserComponent 組件

// ...
import { UserComponent } from './user.component';//載入
@NgModule({
 imports:   [ BrowserModule ],
 declarations: [ AppComponent, UserComponent],//聲明
 bootstrap:  [ AppComponent ]
})
export class AppModule { }

在AppComponent中使用 UserComponent 組件

import { Component } from '@angular/core';

@Component({
 selector: 'my-app',
 template: `
  <sl-user></sl-user> //UserComponent 的 selector
 `,
})
export class AppComponent {}

以上是“angular4自定義組件的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！