Angular 2+ 动态组件

Angular 2+ 中的动态组件怎么用?这对于像我这样的初学者来说无疑是一个很大的挑战,特别是在看官方介绍文档和示例时,倍感压力。为此,本文用尽可能简单的例子来实现Angular 2+ 动态组件加载。 在实现动态组件之前,我们就要有心理准备,因为在这个简单的示例中涉及到了比较多的知识点,包括但不限于: ViewChild ViewContainerRef ComponentFactoryResolver AfterViewInit Directive ViewChild:属性装...

2018
01-09

Angular 2+ 组件样式

前言 angular 2+ 后样式的使用模式有了很大的改变,这可能给我们带来不少的好处,也符合 Angular 2+ 本身的初衷(模块化),第个模块都会有自己样式,互不影响。让我们在修改样式时,只需要关注当前模块就可以了。好了,下面我们开始组件的样式之旅。 组件样式之旅 给组件添加样式有很多种方法,大致跟我们平时引入样式的规则相同。下面我们就来看看组件引入样式的各种套路。 元数据中的样式 import ...

2018
01-08

Angular 2+ 组件间的数据交互

组件之间的交互 通过输入型绑定把数据从父组件传到子组件 这种数据交互比较简单,直接通过属性传入子组件,然后在子组件通过 @Input 来获取值,代码如下: parent.component.rs import { Component } from '@angular/core'; @Component({ selector: 'parent-component', template: `<child-component *ngFor="let site of parentSites" [site]="site"></child-component>` ...

2018
01-07

Angular 4.x 多组件示例(Multiple Components)

AppComponent 为我们做了很多事件,在示例的一开始它完成了单个英雄信息的显示,接着就是多个英雄列表及对应英雄的详情信息。接下来我们将会看到新的需求及新的功能。你不可能在一个组件里完成所有东西,这维护起来会很吃力。 我需要把它们拆分成几个子组件,每一个子组件都专注一种任务或者工作流。而 AppComponent 就可以成为一个简单的壳来管理那些子组件。 在这篇文章里,你要做的第一件事就是把英雄的...

2017
07-03