angular|大地老师第三节 angular组件以及组件里面的模板

只看视频印象不深 只有记录下来才能记得更久~

一，新建复习

        1，创建项目并手动安装依赖

//只创建项目不安装依赖（因为npm安装不一定成功）
ng new amgulardemo03 --skip-install

//使用cnpm安装依赖
cnpm install

        2，在vscode中的终端写代码代替命令行

        我出现的问题是：无法加载文件 C:\Users\WXD\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本。

        以下链接有详细解决办法：无法加载文件 C:\Users\*****\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本。——VScode终端问题解决办法_咚の窝-CSDN博客

二，绑定数据

//news.component.ts页面

export class NewsComponent implements OnInit {

  public title = "我是新闻组件";

  msg = "我是一个新闻组件msg";

  username:string = "张三";
  // 任意类型  推荐使用这种方式
  public student:any = "1234";

  // 使用object时报错这没有找到为什么  如果有明白的欢迎留言~
  public userinfo:any={
    username:"张三",
    age:'28'
  };


  public message:any;

  constructor() {
    this.message = "这是给属性赋值，也是改变属性的值"

    console.log(this.msg);

    this.msg = "我是改变后的msg值"
   }

  ngOnInit(): void {
  }

}

     

//news.component.html页面
<h1>angular模板里面绑定数据</h1>

    <p>{{title}}</p>
    <p>{{msg}}</p>
    <p>{{username}}</p>
    <p>{{student}}</p>
    <hr />
    <p>{{userinfo.username}}</p>
    <p>{{message}}</p>

   

 

其中在constructor中可以改变数据的值，打印数据的值

        上面为多种绑定数据的方法 其中最为推荐的为（这种写法没有省略，最标准）：

//news.component.ts页面
public student:any = "1234";

三，绑定属性

        当鼠标移动到被绑定的文字时会出现绑定的属性信息

//news.component.ts页面

//和绑定数据放在一个位置
public student:any = "1234";

//news.component.html页面

<h1>angular模板里面绑定属性</h1>
    <div title="我是一个div">
        鼠标cover上看
    </div>
    <div [title]="student">
        张三
    </div>

 

四，绑定html

 //news.component.ts页面
 public content = "<h2>我是一个html标签</h2>"

//news.component.html页面

<h1>angular模板里面绑定html</h1>
    <div>{{content}}</div>

    <span [innerHTML] = "content" class="red"></span>

 

五，简单的运算

//news.component.html页面
 1 + 2 = {{1+2}}

 

六，数据循环

//news.component.ts页面

// 定义数组
  public arr = ['1111','2222','3333'];

  // 推荐使用方式
  public list:any[] = ['2222','3333','我是最后一个'];

  public items:Array<any> = ['2222','3333','我是最后一个'];

  public userlist:any[] = [{
    username: '张三',
    age: '20'
  },{

    username: '李四',
    age: '25'
  },{

    username: '王五',
    age: '28'
  }];

  public cars:any[] = [
    {
      cate:"宝马",
      list:[
        {
          title:"宝马x1",
          price:"200"
        },
        {
          title:"宝马x2",
          price:"300"
        },
        {
          title:"宝马x3",
          price:"400"
        }
      ]
    },
    {
      cate:"奥迪",
      list:[
        {
          title:"奥迪q1",
          price:"500"
        },
        {
          title:"奥迪q2",
          price:"600"
        },
        {
          title:"奥迪q3",
          price:"700"
        }
      ]
    }
  ]

//news.component.html页面
<h1>angular模板里面数据循环</h1>
    <ul>
        <li *ngFor="let item of arr">
            {{item}}
        </li>
    </ul>
    <ol>
        <li *ngFor="let item of list">
            {{item}}
        </li>
    </ol>
    <ol>
        <li *ngFor="let item of items">
            {{item}}
        </li>
    </ol>

    <ul>
        <li *ngFor="let item of userlist">
            {{item.username}}---{{item.age}}
        </li>
    </ul>

    <ul>
        <li *ngFor="let item of cars">
            <h2>{{item.cate}}</h2>

            <ol>
                <li *ngFor="let car of item.list">
                    {{car.title}}---{{car.price}}
                </li>
            </ol>
        </li>
    </ul>

 

七，声明属性的几种方式：

          不声明则默认public

          public     共有  *（默认）       可以在这个类里面使用，也可以在这个类外面使用

          protected  保护类型              他只可以在当前类和他的子类里面可以访问

          private    私有                  只有在当前类可以访问这个属性

如有错误欢迎指正~