国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

angularV4+學習筆記

LoftySoul / 1071人閱讀

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

angular學習筆記之組件篇

1注解 1.1組件注解

@Component注解，對組件進行配置。

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

selector

template/templateUrl

inputs/outputs

host

styleUrls

selector:選擇器

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

使用方式：

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

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

例如：

@Component({
  selector: ".app-single-component",
  template: `
  

    這個是子組件 ：{{name}}
    
  

  `
})
templdate/templdateUrl：模版/模版路徑

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

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

inputs/output:輸入/輸出

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

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

single-component.component.ts 
@Component({
      selector: "app-single-component",
      template: `
          

            這個是子組件 ：{{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: `
  

    這個是子組件 ：{{name}}
  

  `
})

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

single-component.component.ts改 
@Component({
  selector: "app-single-component",
  template: `
  

    這個是子組件 ：{{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對象key-value，并且作用只做作用于當前組件內(nèi)部，常用來添加class.

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

當然必要的，在需要用到的component的模塊中引入：

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

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

源代碼git地址

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/52623.html

相關文章

  • angularV4+學習筆記

    摘要：注解的元數(shù)據(jù)選擇器頁面渲染時，組件匹配的選擇器使用方式采用標簽的方式。當然必要的，在需要用到的的模塊中引入引入的指令，放在聲明里面引入的模塊引導應用的根組件關于的元數(shù)據(jù)還未完全，所以后面會繼續(xù)完善。 angular學習筆記之組件篇 showImg(https://i.imgur.com/NQG0KG1.png); 1注解 1.1組件注解 @Component注解，對組件進行配置。 1....

    galaxy_robot 評論0 收藏0

  • ApacheCN 人工智能知識樹 v1.0

    摘要：貢獻者飛龍版本最近總是有人問我，把這些資料看完一遍要用多長時間，如果你一本書一本書看的話，的確要用很長時間。為了方便大家，我就把每本書的章節(jié)拆開，再按照知識點合并，手動整理了這個知識樹。 Special Sponsors showImg(https://segmentfault.com/img/remote/1460000018907426?w=1760&h=200); 貢獻者：飛龍版...

    劉厚水 評論0 收藏0

  • 【LNMPR源碼學習】筆記匯總

    摘要：此文用于匯總跟隨陳雷老師及團隊的視頻，學習源碼過程中的思考整理與心得體會，此文會不斷更新視頻傳送門每日學習記錄使用錄像設備記錄每天的學習源碼學習源碼學習內(nèi)存管理筆記源碼學習內(nèi)存管理筆記源碼學習內(nèi)存管理筆記源碼學習基本變量筆記 此文用于匯總跟隨陳雷老師及團隊的視頻，學習源碼過程中的思考、整理與心得體會，此文會不斷更新 視頻傳送門：【每日學習記錄】使用錄像設備記錄每天的學習 PHP7...

    Barrior 評論0 收藏0

發(fā)表評論

0條評論

LoftySoul

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<