Angular --主从组件

最新推荐文章于 2021-03-27 20:12:36 发布

原创最新推荐文章于 2021-03-27 20:12:36 发布 · 273 阅读

0 ·

CC 4.0 BY-SA版权

【Angular】专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在Angular项目中通过创建主从组件提高代码复用性和维护性，以英雄榜应用为例，展示如何将复杂组件分解为更小、更易管理的部分。

前言

什么是主从组件，就是将组件分为主组件和从组件，目的就是让我们更加好维护并且便于利用，将大化小，就如同我们之前的模板类一样，我们以上次做的英雄榜作为例子来进行切割使用。

开始制作

我们首先新建一个新组件：hero-detail

	ng generate component hero-detail

编写模板：我们将之前heroes模板（html）中的下面的代码剪切到我们新建立的这个组件的模板中来：

	<div *ngIf="hero">
	
	  <h2>{{hero.name | uppercase}} Details</h2>
	  <div><span>id: </span>{{hero.id}}</div>
	  <div>
	    <label>name:
	      <input [(ngModel)]="hero.name" placeholder="name">
	    </label>
	  </div>
	
	</div>

在我们新建组件中ts文件中绑定hero属性，并且我们需要在本来的import { Component, OnInit} from ‘@angular/core’; 中添加Input属性，以及在export中添加@Input属性

	import { Component, OnInit, Input } from '@angular/core';
	import { Hero } from '../hero';
	
	@Component({
	  selector: 'app-hero-detail',
	  templateUrl: './hero-detail.component.html',
	  styleUrls: ['./hero-detail.component.css']
	})
	export class HeroDetailComponent implements OnInit {
	
	
	  @Input() hero:Hero;
	
	  constructor() { }
	
	  ngOnInit() {
	  }
	
	}

我们再回到heroes的html中，将我们做的新的组件添加到heroes组件中，用来显示。

	//我们在此页面中最下面添加：
	
	<app-hero-detail [hero]="selectedHero"></app-hero-detail>
	
	//注意： [hero]="selectedHero" 是Angular的属性绑定语法，
	//这是一个单向绑定

小结

此次结果和我们之前的英雄榜是一样的，这个也是为了松耦合，将我们共同用到的代码抽离出来便于维护和复用，这样子我们未来的代码会经常光顾这个组件了，以后我们哪里需要就可以这串代码将以修改写入即可了（<app-hero-detail [hero]=“selectedHero”>
）