angular中的组件以及组件中的模板合成

html

<h1>angular模板里面绑定数据</h1>
<h1>{{msg}}</h1>
<h2>{{username}}</h2>
<h3>{{student}}</h3>
<h4>{{title}}</h4>
<h5>{{userinfo.username}}</h5>
<h6>{{message}}</h6>
<!-- <app-header></app-header> -->
<h1>angular模板里面绑定属性</h1>
<div title="我是一个div">
鼠标放上去
</div>
<div [title]="student">
张三
</div>

<h1>angular绑定html标签</h1>
<div>
    {{content}}
</div>
<span [innerHTML]="content"></span>

<h1>angular循环数组：</h1>
<ol>
    <li *ngFor="let item of arr">
        {{item}}
    </li>
</ol>
<ul>
    <li *ngFor="let item of list">
        {{item}}
    </li>
</ul>

<ul>
    <li *ngFor="let item of userList">
        <h2>{{item.username}}</h2>
        <h4>{{item.age}}</h4>
    </li>
</ul>

ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.scss']
})
export class NewsComponent implements OnInit {
  //定义普通属性：
  public title="我是一个新闻组件";
  msg="我是一个新闻组件的msg";
  username:string="张三";
  public student:any="我是一个学生的属性(数据)";
  public userinfo:object={
    username:"张三007",
    age:'20'
  };
  public message:any;
  public content="<h2>我是一个html标签</h2>";
  constructor() {
    this.message="这是给属性赋的值";
  }
  //定义数组：
  public arr=['111','222','3333'];
  public list:any[]=["我是第一个新闻",2222222222,"我是第三个新闻"];

  //数组对象：
  public userList:any[]=[
    {
      username:"张三",
      age:20
    },{
      username:"李四",
      age:20
    }
  ];
  ngOnInit() {
  }

}