Angular6组件化

「爱情、让人受尽委屈。」 2022-05-09 02:24 264阅读 0赞

前言

大家再用angular的时候都知道它有种种好处，其中一个就是组件化，下面介绍一下它的简单应用  
![这里写图片描述][70]

//component.ts页面会写这样的装饰器
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })

*  1
 *  2
 *  3
 *  4
 *  5
 *  6

*  在启动angular时，会通过index.html页面调用显示页面的装饰器，然后显示其相应的HTML页面，css页面等  
    ![这里写图片描述][70 1]
 *  这里正对应了我们上面selector：‘app-root’
 *  其实这可以理解为我们为component起了一个名字，当我们用到这个组件的时候，就叫它的名字

### 封装 ###

<app-search [information]="information" [url]="searchUrl " (editData)="query($event)"></app-search>

*  1

*  有时候我们会在页面看到类似于这样的组件封装，当它可以共用于多个页面，我们可以将整个模块发布可以让大家共用
 *  例如上面的app-search发布了以后我们就可以从node-module里找到，直接下载并引用就可以在HTML页面直接用  
    ![这里写图片描述][70 2]

<form>
    <input maxlength="30" onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\+\#\.\-\()\（）]/g,'')" onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" oncontextmenu = "value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" type="text" class="form-control" style="float: left;width: 70%"
           #info placeholder="{
       {information}}" >
        
    <button type="submit" class="btn btn-default"
            (click)="query(info.value);">查询</button>
    </form>

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8

//装饰器内容
    @Component({
      selector: 'app-search',
      templateUrl: './search.component.html',
      styleUrls: ['./search.component.css']
    })

*  1
 *  2
 *  3
 *  4
 *  5
 *  6

*  我们在其他页面使用的时候可以再HTML页面将组建选择器的名字以标签的形式引用

### 小结 ###

*  我们可以自己练习发布一个angular的模块，进行再其他页面进行使用
 *  这里没有详细介绍，大家自己查资料吧！

[70]: /images/20220509/de58231d158f40b38e06a1313af33c0e.png
[70 1]: /images/20220509/62f407b435f94b27a4b60d4e4ebb4b38.png
[70 2]: /images/20220509/109f03cf56514427ab07f44384359442.png