Score %0 (0 correct0 incorrect20 unanswered)
问题1. 在这个组件类中，ViewChild装饰器的目的是什么？
@Component({
...
template: '<p #bio></p>'
})
export class UserDetailsComponent {
@ViewChild('bio') bio;
}
- 它允许从组件类中访问模板视图中具有bio模板引用变量的<p>标签的ElementRef对象。
- 它指示<p>标签被呈现为使用此组件的父视图的子项。
- 它使模板中的<p>标签支持内容投影。
- 它使<p>标签在最终渲染中可见。 如果模板中使用了#bio，并且类中未使用@ViewChild，则Angular会自动隐藏具有#bio的<p>标签。
问题2. 在响应式表单中，将FormControl与本机DOM输入元素连接起来使用哪个方法？
- 将给定的FormControl名称字符串添加到<form>元素的名为controls的属性上，以指示它应该包含哪些字段。
- 在DOM元素的值属性周围使用方括号绑定语法，并将其设置为FormControl的实例。
- 使用formControlName指令，并将值设置为给定的FormControl名称字符串。
- 使用给定的FormControl名称作为DOM元素id属性的值。
问题3. ActivatedRoute类的paramMap和queryParamMap之间有什么区别？
- paramMap是路由URL路径中参数的对象字面量。 queryParamMap是同一参数的可观察对象。
- paramMap是包含路由URL路径中参数值的可观察对象。 queryParamMap是一个方法，它接受一个键数组，并用于在paramMap中查找特定参数。
- paramMap是Angular 3中的传统名称。 新名称是queryParamMap。
- 两者都是包含请求的路由URL字符串中的值的Observables。 paramMap包含URL路径中的参数值，而queryParamMap包含URL查询参数。
问题4. 根据以下使用异步管道的用法，并假设users类字段是Observable，有多少个对users Observable的订阅？
<h2>Names</h2> <div *ngFor="let user of users | async">{{ user.name }}</div> <h2>Ages</h2> <div *ngFor="let user of users | async">{{ user.age }}</div> <h2>Genders</h2> <div *ngFor="let user of users | async">{{ user.gender }}</div>
- 没有。 异步管道不会自动订阅。
- 没有。 模板语法不正确。
- 三个。 每个异步管道一个。
- 一个。 异步管道通过类型内部缓存可观察对象。
问题5. 如何使用HttpClient从addOrder函数内向端点发送POST请求？
export class OrderService {
constructor(private httpClient: HttpClient) {}
addOrder(order: Order) {
// Missing line
}
}
-
this.httpClient.url(this.orderUrl).post(order); -
this.httpClient.send(this.orderUrl, order); -
this.httpClient.post<Order>(this.orderUrl, order); -
this.httpClient.post<Order>(this.orderUrl, order).subscribe();
问题6. RouterModule.forRoot方法用于什么？
- 注册要在路由组件中使用的任何提供者。
- 在根应用程序级别注册路由定义。
- 表示Angular应该为您的路由加油以取得成功。
- 声明您只打算在根级别使用路由。
问题7. 此组件元数据选择器将匹配哪些DOM元素？
@Component({
selector: 'app-user-card',
. . .
})
- 任何具有属性app-user-card的元素，例如
<div app-user-card></div>。 -
<app-user-card></app-user-card>的第一个实例。 - 所有
<app-user-card></app-user-card>的实例。 - 所有
<user-card></user-card>的实例。
问题8. 使用内置的ngFor结构指令正确的模板语法是什么来渲染产品名称列表？
-
%OPTION% A
<ul> <li [ngFor]="let productName of productNames">{{ productName }}</li> </ul> -
%OPTION% B
<ul> <li ngFor="let productName of productNames">{{ productName }}</li> </ul> -
%OPTION% C
<ul> <li *ngFor="let productName of productNames">{{ productName }}</li> </ul> -
%OPTION% D
<ul> <? for productName in productNames { ?> <li>{{ productName }}</li> <? } ?> </ul>
问题9. 用于为组件设置CSS样式的两个组件装饰器元数据属性是什么？
- viewEncapsulation和viewEncapsulationFiles。
- 只有一个属性，即名为css。
- css和cssUrl。
- styles和styleUrls。
问题10. 使用以下组件类，您会在模板中使用什么模板语法来显示title类字段的值？
@Component({
selector: 'app-title-card',
template: '',
})
class TitleCardComponent {
title = 'User Data';
}
-
{{ 'title' }} -
{{ title }} -
[title] - 无法通过模板语法在模板中显示类字段。
问题11. FormControl上的valueChanges方法的目的是什么？
- 它用于配置控件允许的值。
- 它用于将控件的值更改为新值。 您将调用该方法，并将新值传递给表单字段的新值。 它甚至支持传递可以随时间设置的值数组。
- 它返回一个布尔值，该布尔值基于控件的值与初始化时的值是否不同。
- 它是一个observable，每次控件的值更改时都会发出一次，因此您可以对新值做出反应，并在那时做出逻辑决策。
问题13. 此组件类中Output装饰器用于什么？
@Component({
selector: 'app-shopping-cart',
. . .
})
export class ShoppingCartComponent {
@Output() itemTotalChanged = new EventEmitter();
}
- 它使
itemTotalChanged类字段公开。 - 它提供了一种将值绑定到
itemTotalChanged类字段的方法，如：<app-shopping-cart [itemTotalChanged] =“newTotal”> </app-shopping-cart>。 - 它提供了一种将事件绑定到
itemTotalChanged类字段的方法，如：<app-shopping-cart (itemTotalChanged) =“logNewTotal($event)”> </app-shopping-cart>。 - 它只是一种在类字段前放置注释以供文档使用的方法。
问题14. 处理条件显示的这两个标记示例之间的区别是什么？
<div *ngIf="isVisible">Active</div> <div [hidden]="!isVisible">Active</div>
-
ngIf是另一个示例的简写。 当Angular处理该指令时，它会在DOM中写入一个带有隐藏属性的div元素。 - 它们在根本上是一样的。
-
ngIf指令不会在表达式为false时在DOM中呈现div。 使用hidden属性会隐藏浏览器视口中的div内容，但div仍然存在于DOM中。 -
ngIf有效，但使用hidden属性是错误的，并将引发错误。
问题15. 在此模板驱动形式示例中，如何在表单存在错误时禁用提交按钮？
<form #userForm="ngForm"> <input type="text" ngModel name="firstName" required /> <input type="text" ngModel name="lastName" required /> <button (click)="submit(userForm.value)">Save</button> </form>
-
%OPTION% A
<button (click)="submit(userForm.value)" disable="userForm.invalid">Save</button> -
%OPTION% B
<button (click)="submit(userForm.value)" [disabled]="userForm.invalid">Save</button> -
%OPTION% C
<button (click)="submit(userForm.value)" [ngForm.disabled]="userForm.valid">Save</button> -
%OPTION% D
<button (click)="submit(userForm.value)" *ngIf="userForm.valid">Save</button>
问题16. 您想要查看创建新contact-card组件会生成哪些文件。 您将使用哪个命令？
- ng generate component contact-card --dry-run
- ng generate component contact-card --no-files
- ng generate component component --dry
- ng generate component --exclude
问题17. 根据以下组件，您将在模板中使用什么模板语法将TitleCardComponent的titleText字段绑定到h1元素的title属性？
@Component({
selector: 'app-title-card',
template: '<h1 title="User Data"> {{titleText}}</h1>',
})
export class TitleCardComponent {
titleText = 'User Data';
}
-
<h1 data-title="titleText">{{ titleText }}</h1> -
<h1 title="titleText">{{ titleText }}</h1> -
<h1 [title]="titleText">{{ titleText }}</h1> -
<h1 titleText>{{ titleText }}</h1>
问题18. Angular生命周期钩子是什么？
- 用于跟踪Angular应用程序的健康状况的日志记录器
- 可用于跟踪组件实例的提供者
- 可在DOM事件的模板中使用的内置管道
- 组件和指令的保留命名方法，Angular将在其执行的设置时间调用，并且可以用于在其生命周期时刻进行操作
问题19. 选取此模板语法代码的最佳描述是什么？
<span>Boss: {{job?.bossName}} </span>
- ？是异步管道的简写。 job值必须是Observable。
- 它在job字段上使用了安全导航运算符（？）。 如果job字段未定义，则将忽略对bossName的访问，不会发生错误。
- 模板语法中存在错误。 ？在此处无效。
- 如果存在job值，则显示该值； 否则，显示bossName。
问题20. 如何为支持URL路径user/23的UserDetailComponent配置路由定义（其中23表示请求的用户的id）？
-
{ path: 'user/:id', component: UserDetailComponent } -
{ url: 'user/:id', routedComponent: UserDetailComponent } -
{ routedPath: 'user/:id', component: UserDetailComponent } -
{ destination: new UserDetailComponent(), route: 'user/:id' }
