Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit92b4215

Browse files
committed
add 多组件化开发
1 parent53638d1 commit92b4215

File tree

9 files changed

+209
-11
lines changed

9 files changed

+209
-11
lines changed

‎SUMMARY.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
*[修改 AppComponent 组件](docs/edit-app-component.md)
88
*[用户编辑器](docs/user-editor.md)
99
*[展示用户列表](docs/user-list.md)
10+
*[多组件化开发](docs/user-detail-componet.md)
1011
*[参考资料](docs/references.md)
1112
* To be continued ...未完待续...
1213

‎docs/user-detail-componet.md‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
#多组件化开发
2+
3+
4+
本节，要把原来的 UsersComponent 重构成为 UsersComponent、UserDetailComponent 两个组件。多组件开发的方式以下优化：
5+
6+
* 通过缩减 UsersComponent 的职责简化了该组件。
7+
* 可以把 UserDetailComponent 改进成一个功能丰富的用户编辑器，而不用改动父组件 UsersComponent。
8+
* 可以改进 UsersComponent，而不用改动用户详情视图。
9+
* 可以在其它组件的模板中重复使用 UserDetailComponent。
10+
11+
##创建 UserDetailComponent 组件
12+
13+
14+
与 UsersComponent 的创建方式类似，我们使用 Angular CLI 创建一个名为 user-detail 的新组件。
15+
16+
```ts
17+
nggeneratecomponentuser-detail
18+
```
19+
20+
21+
CLI 创建了一个新的文件夹 src/app/user-detail/，并生成了 UserDetailComponent 的相关的四个文件。
22+
23+
```ts
24+
nggeneratecomponentuser-detail
25+
CREATEsrc/app/user-detail/user-detail.component.html (30bytes)
26+
CREATEsrc/app/user-detail/user-detail.component.spec.ts (657bytes)
27+
CREATEsrc/app/user-detail/user-detail.component.ts (288bytes)
28+
CREATEsrc/app/user-detail/user-detail.component.css (0bytes)
29+
UPDATEsrc/app/app.module.ts (556bytes)
30+
```
31+
32+
33+
##编辑 user-detail.component.html
34+
35+
从 UsersComponent 模板的底部把表示用户详情的 HTML 代码剪切粘贴到所生成的 UserDetailComponent 模板中。
36+
37+
所粘贴的 HTML 引用了 selectedUser。 新的 UserDetailComponent 可以展示任意用户，而不仅仅所选的。因此还要把模板中的所有 selectedUser 替换为 user。
38+
39+
完工之后，UserDetailComponent 的模板应该是这样的：
40+
41+
42+
```html
43+
<div*ngIf="user">
44+
<h2>{{user.name}}</h2>
45+
<div><span>id: </span>{{user.id}}</div>
46+
<div>
47+
<label>name:
48+
<input[(ngModel)]="user.name"placeholder="name">
49+
</label>
50+
</div>
51+
</div>
52+
```
53+
54+
##编辑 user-detail.component.ts
55+
56+
UserDetailComponent 模板中绑定了组件中的 user 属性，它的类型是 User
57+
58+
打开 UserDetailComponent 类文件 user-detail.component.ts ，并导入 User 符号。
59+
60+
61+
```ts
62+
import {User }from'../user';
63+
```
64+
65+
user 属性必须是一个带有`@Input()` 装饰器的输入属性，因为外部的 UsersComponent 组件将会绑定到它。就像这样：
66+
67+
```html
68+
<app-user-detail[user]="selectedUser"></app-user-detail>
69+
```
70+
71+
修改@angular/core 的导入语句，导入 Input 符号。
72+
73+
74+
```ts
75+
import {Component,OnInit,Input }from'@angular/core';
76+
```
77+
78+
添加一个带有@Input() 装饰器的 user 属性。
79+
80+
```ts
81+
@Input()user:User;
82+
```
83+
84+
85+
完整代码如下：
86+
87+
```ts
88+
import {Component,OnInit,Input }from'@angular/core';
89+
90+
import {User }from'../user';
91+
92+
@Component({
93+
selector:'app-user-detail',
94+
templateUrl:'./user-detail.component.html',
95+
styleUrls: ['./user-detail.component.css']
96+
})
97+
exportclassUserDetailComponentimplementsOnInit {
98+
99+
@Input() user:User;
100+
101+
constructor() { }
102+
103+
ngOnInit() {
104+
}
105+
106+
}
107+
```
108+
109+
110+
111+
##编辑 users.component.html
112+
113+
114+
UserDetailComponent 的选择器是 'app-user-detail'。 把 <app-user-detail> 添加到 UsersComponent 模板 users.component.html 的底部，以便把用户详情的视图显示到那里。
115+
116+
把 UsersComponent.selectedUser 绑定到该元素的 user 属性，就像这样：
117+
118+
```html
119+
<app-user-detail[user]="selectedUser"></app-user-detail>
120+
```
121+
122+
其中，`[user]="selectedUser"` 是 Angular 的属性绑定语法。
123+
124+
125+
这是一种单向数据绑定。从 UsersComponent 的 selectedUser 属性绑定到目标元素的 user 属性，并映射到了 UserDetailComponent 的 user 属性。
126+
127+
现在，当用户在列表中点击某个用户时，selectedUser 就改变了。 当 selectedUser 改变时，属性绑定会修改 UserDetailComponent 的 user UserDetailComponent 就会显示这个新的用户信息。
128+
129+
修改后的 UsersComponent 的模板 users.component.html 是这样的：
130+
131+
```html
132+
<h2>我的用户</h2>
133+
<ulclass="users">
134+
<li*ngFor="let user of users"
135+
[class.selected]="user === selectedUser"
136+
(click)="onSelect(user)">
137+
<spanclass="badge">{{user.id}}</span> {{user.name}}
138+
</li>
139+
</ul>
140+
141+
<app-user-detail[user]="selectedUser"></app-user-detail>
142+
```
143+
144+
145+
##运行
146+
147+
148+
执行`ng serve` 命名以启动应用。效果如下：
149+
150+
![](../images/user-detail/user-detail.jpg)

‎images/user-detail/user-detail.jpg‎

30.5 KB
Loading

‎samples/user-management/src/app/app.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,13 @@ import { NgModule } from '@angular/core';
44

55
import{AppComponent}from'./app.component';
66
import{UsersComponent}from'./users/users.component';
7+
import{UserDetailComponent}from'./user-detail/user-detail.component';
78

89
@NgModule({
910
declarations:[
1011
AppComponent,
11-
UsersComponent
12+
UsersComponent,
13+
UserDetailComponent
1214
],
1315
imports:[
1416
BrowserModule,

‎samples/user-management/src/app/user-detail/user-detail.component.css‎

Whitespace-only changes.
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
2+
<div*ngIf="user">
3+
<h2>{{user.name}}</h2>
4+
<div><span>id:</span>{{user.id}}</div>
5+
<div>
6+
<label>name:
7+
<input[(ngModel)]="user.name"placeholder="name">
8+
</label>
9+
</div>
10+
</div>
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import{async,ComponentFixture,TestBed}from'@angular/core/testing';
2+
3+
import{UserDetailComponent}from'./user-detail.component';
4+
5+
describe('UserDetailComponent',()=>{
6+
letcomponent:UserDetailComponent;
7+
letfixture:ComponentFixture<UserDetailComponent>;
8+
9+
beforeEach(async(()=>{
10+
TestBed.configureTestingModule({
11+
declarations:[UserDetailComponent]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(()=>{
17+
fixture=TestBed.createComponent(UserDetailComponent);
18+
component=fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create',()=>{
23+
expect(component).toBeTruthy();
24+
});
25+
});
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import{Component,OnInit,Input}from'@angular/core';
2+
3+
import{User}from'../user';
4+
5+
@Component({
6+
selector:'app-user-detail',
7+
templateUrl:'./user-detail.component.html',
8+
styleUrls:['./user-detail.component.css']
9+
})
10+
exportclassUserDetailComponentimplementsOnInit{
11+
12+
@Input()user:User;
13+
14+
constructor(){}
15+
16+
ngOnInit(){
17+
}
18+
19+
}

‎samples/user-management/src/app/users/users.component.html‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,4 @@ <h2>我的用户</h2>
77
</li>
88
</ul>
99

10-
11-
<div*ngIf="selectedUser">
12-
<h2>{{selectedUser.name}}</h2>
13-
<div><span>id:</span>{{selectedUser.id}}</div>
14-
<div>
15-
<label>name:
16-
<input[(ngModel)]="selectedUser.name"placeholder="name">
17-
</label>
18-
</div>
19-
</div>
10+
<app-user-detail[user]="selectedUser"></app-user-detail>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp