angularV4+學(xué)習(xí)筆記

LoftySoul 發(fā)布于2019-08-02 10:53 / 1077人閱讀

摘要：注解的元數(shù)據(jù)選擇器頁面渲染時(shí)，組件匹配的選擇器使用方式采用標(biāo)簽的方式。當(dāng)然必要的，在需要用到的的模塊中引入引入的指令，放在聲明里面引入的模塊引導(dǎo)應(yīng)用的根組件關(guān)于的元數(shù)據(jù)還未完全，所以后面會(huì)繼續(xù)完善。

angular學(xué)習(xí)筆記之組件篇

1注解 1.1組件注解

@Component注解，對(duì)組件進(jìn)行配置。

1.1.1注解@Component的元數(shù)據(jù)

selector

template/templateUrl

inputs/outputs

host

styleUrls

selector:選擇器

頁面渲染時(shí)，Angular組件匹配的選擇器,

使用方式：

采用html標(biāo)簽的方式。
在《Angular權(quán)威教程》中，說明另外一種，

,這種規(guī)則與選擇器匹配規(guī)則一致，也可以為class選擇器，根據(jù)實(shí)際場(chǎng)景而用。（在Ideal中引入TSLint后，程序能夠正常運(yùn)行，但是編輯器會(huì)警告，并提示消除警告方案）

例如：

@Component({
  selector: ".app-single-component",
  template: `
  
    這個(gè)是子組件 ：{{name}}
    
  
  `
})

templdate/templdateUrl：模版/模版路徑

組件具體的html模版，template為模版，templateUrl為模版的路徑。
template中支持es6的反引號(hào)，進(jìn)行多行編寫，templdateUrl用于配置html模版的路徑。

注意：在Typescript中的構(gòu)造函數(shù)只允許有一個(gè)，這也是它與es6的一個(gè)區(qū)別

inputs/output:輸入/輸出

組件中的輸入與輸出，可以理解為，數(shù)據(jù)輸入到組件中，數(shù)據(jù)從組件中輸出到父組件中。

輸入使用方式:[變量名]，在父元素頁面中使用，@Input()，在子組件class中使用,代碼例子如下：

single-component.component.ts

@Component({
      selector: "app-single-component",
      template: `
          
            這個(gè)是子組件 ：{{name}}
          
          `
        })
export class SingleComponentComponent implements OnInit {

  @Input () name: string ;

  ngOnInit () {
  }

}

app.component.ts

@Component({
  selector: "app-root",
  template: `
    
      
  
  `
})
export class AppComponent {
  simple: string;

  constructor () {
    this.simple = "我的世界";
  }
}

其中input作為@Component的元數(shù)據(jù)，那么還有另外一種寫法，之后的輸出也一致

其中一段代碼

@Component({
  selector: "app-single-component",
  inputs:["name"],
  template: `
  
    這個(gè)是子組件 ：{{name}}
  
  `
})

輸出使用方式：輸出的方式或許用廣播/訂閱來說更加合適。

single-component.component.ts改

@Component({
  selector: "app-single-component",
  template: `
  
    這個(gè)是子組件 ：{{name}}
    
  
  `
})
export class SingleComponentComponent implements OnInit {

  value: string;
  @Input () name: string ;
  @Output() emotter: EventEmitter;

  ngOnInit () {
  }

  constructor () {
    this.value = "來源于組件的值";
    this.emotter = new EventEmitter();
  }

  sendMessage (): void {
    this.emotter.emit(this.value);
  }

}

app.component.ts改

@Component({
  selector: "app-root",
  template: `
    
      
  
  `
})
export class AppComponent {
  simple: string;

  constructor () {
    this.simple = "我的世界";
  }

  getComponentData (message: string): void {
     console.log(`獲取到子組件中的值：${message}`);
  }
}

host:用于在元素行配置元素屬性

值為json對(duì)象key-value，并且作用只做作用于當(dāng)前組件內(nèi)部，常用來添加class.

styleUrls:層疊樣式表url，值位數(shù)組，可以傳多個(gè)。

當(dāng)然必要的，在需要用到的component的模塊中引入：

@NgModule({
  declarations: [
    AppComponent,
    SingleComponentComponent // 引入的指令，放在聲明里面
  ],
  imports: [
    BrowserModule // 引入的模塊
  ],
  providers: [],
  bootstrap: [AppComponent] //引導(dǎo)應(yīng)用的根組件
})
export class AppModule { }

關(guān)于@component的元數(shù)據(jù)還未完全，所以后面會(huì)繼續(xù)完善。

源代碼git地址

GPU云服務(wù)器云服務(wù)器學(xué)習(xí)筆記學(xué)習(xí)筆記一基礎(chǔ)學(xué)習(xí)筆記深度學(xué)習(xí)筆記

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/52623.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

LoftySoul

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow可視化網(wǎng)絡(luò)

閱讀 2400·2023-04-26 02:54
C語言static關(guān)鍵字

閱讀 2321·2021-10-14 09:43
云主機(jī)如何配置-云主機(jī)怎么使用？

閱讀 3372·2021-09-22 15:19
css3偽類和偽元素你都懂了嗎

閱讀 2850·2019-08-30 15:44
CSS3中的flexbox

閱讀 2708·2019-08-30 12:54
響應(yīng)式布局【flex】

閱讀 990·2019-08-29 18:43
關(guān)于我

閱讀 1943·2019-08-29 17:12
sublime配置及使用技巧

閱讀 1335·2019-08-29 16:40

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

angularV4+學(xué)習(xí)筆記

1.1.1注解@Component的元數(shù)據(jù)

相關(guān)文章