Angular DAY04

Angular04

命令行 说明

ng new 项目名	生成项目包
ng s -o	启动项目
ng g c 组件	生成组件
ng g p 管道	生成管道 {{xxx| 管道}}
ng g d 指令	生成指令
ng g s 服务	生成服务; 状态共享 相当于vuex

---

语法 含义

{{ 变量 }}	双标签内容
[属性名] = "值" 或 属性名="{{值}}"	属性
(事件名)="方法名()"	事件
[(ngModel)]="变量"<br>必须手动加载 Forms 模块	双向数据绑定
*ngIf	条件渲染
*ngFor = "let item of items; let i=index"	
<组件 #唯一标识 /><br>@viewChild('唯一标识') 变量:类型;	绑定变量到组件
<组件 属性名='值' /><br>@Input() 属性名:类型	父子传参

1.父声明一个方法
2.把方法通过事件方式传递给子
3.子调用父传入的方法, 把自身的消息传递到方法中 子父传参

1. 声明依赖: 类的构造方法声明 一个 特定类型的变量<br>2.注入: 系统在初始化组件时, 就必须传入指定类型的对象	服务的依赖注入机制
1. 网络模块默认不加载, 必须到 app.module.ts 中加载 HttpClientModule<br>2. 服务类型: HttpClient<br>3. 使用: this.http.get(地址).subscribe(res=>{})	网络服务
组件都有 出生 -> 更新自身 -> 死亡<br>1. 构造<br>2. ngOnInit() : 开始初始化<br>3. ngAfterContentInit(): 数据初始化完毕<br>4. ngAfterViewInit(): UI初始化完毕--界面<br>5. ngAfterContentChecked(): 数据更新完毕<br>6. ngAfterViewChecked(): UI更新完毕<br>7. ngOnDestroy(): 销毁	生命周期
ionic
项目启动命令:
ionic s
组件库: https://ionicframework.com/docs/components
按钮组件
https://ionicframework.com/docs/api/button
 

<!-- 按钮组件 -->
<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title>Button按钮</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <!-- 按钮的风格: 默认会根据设备自动调整 -->
    <ion-button>default</ion-button>
    <!-- 风格属性: mode -->
    <ion-button mode="ios">mode: ios</ion-button>
    <ion-button mode="md">mode: android</ion-button>

    <!-- 大小: size -->
    <ion-button size="small">size:small</ion-button>
    <ion-button size="default">size:default</ion-button>
    <ion-button size="large">size:large</ion-button>

    <!-- 填充: fill -->
    <ion-button fill="clear">fill:clear</ion-button>
    <ion-button fill="outline">fill:outline</ion-button>
    <ion-button fill="solid">fill:solid</ion-button>

    <!-- 扩展性: expand -->
    <ion-button expand="full">expand:full</ion-button>
    <ion-button expand="block">expand:block</ion-button>

    <!-- 颜色风格: color  官方提供了一些固定的颜色风格 -->
    <ion-button color="primary">color:primary</ion-button>
    <ion-button color="secondary">color:secondary</ion-button>
    <ion-button color="success">color:success</ion-button>
    <ion-button color="warning">color:warning</ion-button>
    <ion-button color="danger">color:danger</ion-button>
    <ion-button color="light">color:light</ion-button>
    <ion-button color="dark">color:dark</ion-button>
    <ion-button color="medium">color:medium</ion-button>
    <ion-button color="tertiary">color:tertiary</ion-button>

    <!-- 不可用 -->
    <ion-button disabled>不可用</ion-button>
  </ion-content>
</ion-app>

徽章组件
https://ionicframework.com/docs/api/badge

<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title>badge徽章</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-badge color="primary">42</ion-badge>
    <ion-badge color="success">42</ion-badge>
    <ion-badge color="danger">42</ion-badge>

    <ion-badge color="warning">颜值主播</ion-badge>
    <ion-badge color="warning">舞蹈达人</ion-badge>
    <ion-badge color="warning">渣然</ion-badge>
  </ion-content>
</ion-app>

图标组件
官方提供了很多小图标, 可以直接使用
https://ionicons.com/

<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title>icon图标</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-icon name="logo-alipay"></ion-icon>

    <!-- 图标通过 字体调整大小 -->
    <ion-icon name="logo-alipay" style="font-size: 40px"></ion-icon>

    <ion-icon
      name="logo-alipay"
      style="font-size: 40px"
      color="tertiary"
    ></ion-icon>

    <ion-icon
      name="logo-wechat"
      style="font-size: 40px"
      color="success"
    ></ion-icon>
  </ion-content>
</ion-app>

卡片组件
https://ionicframework.com/docs/api/card

<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title>Card卡片</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <!-- i-card-full -->
    <ion-card>
      <img
        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606890843974&di=185d2f0518aac3964f7eb734ce5b9317&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201807%2F13%2F20180713223116_sfuuu.thumb.700_0.jpg"
        alt=""
      />
      <ion-card-header>
        <ion-card-subtitle>带土, 卡卡西, 琳</ion-card-subtitle>
        <ion-card-title>火影忍者</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        描述信息,描述信息描述信息描述信息描述信息描述信息
      </ion-card-content>
    </ion-card>
  </ion-content>
</ion-app>

输入框
https://ionicframework.com/docs/api/input

<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title>输入框</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-input type="text" placeholder="用户名"></ion-input>
    <ion-input type="password" placeholder="密码"></ion-input>
    <ion-input type="number" placeholder="数字"></ion-input>
  </ion-content>
</ion-app>

搜索框
https://ionicframework.com/docs/api/searchbar

<ion-app> 
  <ion-header> 
    <ion-toolbar> 
      <ion-title>搜索框</ion-title> 
    </ion-toolbar> 
  </ion-header> 
 
  <ion-content> 
    <ion-searchbar 
      placeholder="Filter Pizza" 
      (ionChange)="onSearchChange($event)" 
    ></ion-searchbar> 
  </ion-content> 
</ion-app> 

item
https://ionicframework.com/docs/api/item

export class AppComponent {
  // 输入框内容变化时 触发
  onSearchChange(event) {
    // console.log(event);
    let v = event.detail.value;
    console.log(v);

    //发请求给服务器, 查询结果并展示
  }
}
<ion-app> 
  <ion-header> 
    <ion-toolbar> 
      <ion-title>item</ion-title> 
    </ion-toolbar> 
  </ion-header> 
 
  <ion-content> 
    <ion-item color="warning"> 
      <ion-label>warning</ion-label> 
    </ion-item> 
 
    <!-- 点击效果 --> 
    <ion-item button detail> 
      <ion-label>账号与安全</ion-label> 
    </ion-item> 
 
    <ion-item button detail> 
      <!-- label:占据剩余所有空间 --> 
      <ion-label>青少年模式</ion-label> 
      <!-- text: 相当于span --> 
      <ion-text> 未开启 </ion-text> 
    </ion-item> 
 
    <ion-item detail button> 
      <!-- 插槽slot:  左start 右end --> 
      <ion-icon name="body-outline" color="primary" slot="start"></ion-icon> 
      <ion-label>附近的人</ion-label> 
    </ion-item> 
 
    <ion-item> 
      <!-- avatar: 头像 -- 圆 --> 
      <ion-avatar slot="start"> 
        <img [src]="header" /> 
      </ion-avatar> 
      <ion-label> 
        <h2>一级演员-张嘉译</h2> 
        <p>任乐乐小姐姐, 看见请冒泡</p> 
      </ion-label> 
    </ion-item> 
 
    <ion-item> 
      <!-- thumbnail: 缩略图-- 正方形 --> 
      <ion-thumbnail slot="start"> 
        <img [src]="header" /> 
      </ion-thumbnail> 
      <ion-label> 
        <h2>一级演员-张嘉译</h2> 
        <p>这是什么属性</p> 
      </ion-label> 
    </ion-item> 
 
    <ion-item> 
      <ion-label>姓名:</ion-label> 
      <ion-input></ion-input> 
    </ion-item> 
 
    <!-- i-item-group --> 
    <ion-item-group> 
      <ion-item-divider> 
        <ion-label>A</ion-label> 
      </ion-item-divider> 
 
      <ion-item> 
        <ion-label>阿斌</ion-label> 
      </ion-item> 
      <ion-item> 
        <ion-label>阿强</ion-label> 
      </ion-item> 
 
      <ion-item-divider> 
        <ion-label>B</ion-label> 
      </ion-item-divider> 
 
      <ion-item> 
        <ion-label>奔驰</ion-label> 
      </ion-item> 
      <ion-item> 
        <ion-label>宝马</ion-label> 
      </ion-item> 
    </ion-item-group> 
  </ion-content> 
</ion-app> 

栅格布局grid
https://ionicframework.com/docs/api/grid

<!-- 布局: 栅格布局 --> 
<ion-app> 
  <ion-header> 
    <ion-toolbar> 
      <ion-title>grid栅格布局</ion-title> 
    </ion-toolbar> 
  </ion-header> 
 
  <ion-content> 
    <!-- i-grid --> 
    <ion-grid fixed> 
      <ion-row> 
        <!-- 每行分12列 --> 
        <ion-col size="6">1</ion-col> 
        <ion-col size="6">2</ion-col> 
      </ion-row> 
 
      <ion-row> 
        <!-- 每行分12列 --> 
        <ion-col size="2">2</ion-col> 
        <ion-col size="4">4</ion-col> 
        <ion-col size="6">6</ion-col> 
      </ion-row> 
 
      <ion-row> 
        <!-- 不写size 属性, 均分 --> 
        <ion-col>1</ion-col> 
        <ion-col>1</ion-col> 
        <ion-col>1</ion-col> 
      </ion-row> 
 
      <ion-row> 
        <!-- 超出12份: 自动折行显示 --> 
        <ion-col size="6">6</ion-col> 
        <ion-col size="5">5</ion-col> 
        <ion-col size="5">5</ion-col> 
      </ion-row> 
    </ion-grid> 
  </ion-content> 
</ion-app> 

跨域解决办法
常用共三种:
• 服务端解决: cors
– 实际开发最常用
• 前端解决: 代码proxy
– 开发时常用, 如果发布成产品 不会使用!
• 前端+后端共同解决: jsonp
– 原理是 script 不会被 同源策略影响, 很少用.

angular的 proxy 解决方案
• 创建 src/proxy.conf.json

• 配置: 让启动时自动加载代理文件

• 启动时的替换原理:

• 重新启动: ionic s 即可