honeymoose/angular-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(docs-infra): fix docs examples for Angular-specific tslint rules (#38143)

Browse Source 
This commit updates the docs examples to be compatible with the
following Angular-specific tslint rules:
- `component-selector`
- `directive-selector`
- `no-conflicting-lifecycle`
- `no-host-metadata-property`
- `no-input-rename`
- `no-output-native`
- `no-output-rename`

This is in preparation of updating the docs examples `tslint.json` to
match the one generated for new Angular CLI apps in a future commit.

PR Close #38143
This commit is contained in:
George Kalpakas 2020-07-30 13:03:21 +03:00 committed by Alex Rickabaugh
parent 5303773daf
commit bfd13c06e1
27 changed files with 40 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
aio/content/examples/accessibility/src/app/progress-bar.component.ts
View File

@ -1,3 +1,4 @@
// tslint:disable: no-host-metadata-property
// #docregion progressbar-component
import { Component, Input } from '@angular/core';

12
aio/content/examples/attribute-binding/src/app/comp-with-host-binding.component.ts
View File

@ -1,16 +1,16 @@
import { Component } from '@angular/core';
import { Component, HostBinding } from '@angular/core';
@Component({
selector: 'comp-with-host-binding',
template: 'I am a component!',
host: {
'[class.special]': 'isSpecial',
'[style.color]': 'color',
'[style.width]': 'width'
}
})
export class CompWithHostBindingComponent {
@HostBinding('class.special')
isSpecial = false;
@HostBinding('style.color')
color = 'green';
@HostBinding('style.width')
width = '200px';
}

2
aio/content/examples/component-interaction/src/app/hero-child.component.ts
View File

@ -12,6 +12,6 @@ import { Hero } from './hero';
})
export class HeroChildComponent {
@Input() hero: Hero;
@Input('master') masterName: string;
@Input('master') masterName: string; // tslint:disable-line: no-input-rename
}
// #enddocregion

6
aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts
View File

@ -1,5 +1,4 @@
/* tslint:disable: no-unused-variable component-selector-name one-line space-before-function-paren */
/* tslint:disable:*/
/* tslint:disable: no-unused-variable component-selector one-line space-before-function-paren */
// #docplaster
// #docregion
import { Component, forwardRef, Optional, SkipSelf } from '@angular/core';
@ -20,8 +19,7 @@ const DifferentParent = Parent;
// The `parentType` defaults to `Parent` when omitting the second parameter.
// #docregion provide-the-parent
export function provideParent
// #enddocregion provide-parent, provide-the-parent
// #docregion provide-parent
// #enddocregion provide-the-parent
(component: any, parentType?: any) {
return { provide: parentType || Parent, useExisting: forwardRef(() => component) };
}

2
aio/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts
View File

@ -11,7 +11,7 @@ import { AdComponent } from './ad.component';
template: `
<div class="ad-banner-example">
<h3>Advertisements</h3>
<ng-template ad-host></ng-template>
<ng-template adHost></ng-template>
</div>
`
// #enddocregion ad-host

3
aio/content/examples/dynamic-component-loader/src/app/ad.directive.ts
View File

@ -1,8 +1,9 @@
// tslint:disable: directive-selector
// #docregion
import { Directive, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[ad-host]',
selector: '[adHost]',
})
export class AdDirective {
constructor(public viewContainerRef: ViewContainerRef) { }

6
aio/content/examples/elements/src/app/popup.component.ts
View File

@ -1,6 +1,6 @@
// tslint:disable: variable-name
// #docregion
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
@Component({
@ -9,9 +9,6 @@ import { animate, state, style, transition, trigger } from '@angular/animations'
<span>Popup: {{message}}</span>
<button (click)="closed.next()">&#x2716;</button>
`,
host: {
'[@state]': 'state',
},
animations: [
trigger('state', [
state('opened', style({transform: 'translateY(0%)'})),
@ -41,6 +38,7 @@ import { animate, state, style, transition, trigger } from '@angular/animations'
`]
})
export class PopupComponent {
@HostBinding('@state')
state: 'opened' | 'closed' = 'closed';
@Input()

2
aio/content/examples/event-binding/src/app/click.directive.ts
View File

@ -1,4 +1,4 @@
/* tslint:disable use-output-property-decorator directive-class-suffix */
// tslint:disable: directive-selector
import { Directive, ElementRef, EventEmitter, Output } from '@angular/core';
@Directive({selector: '[myClick]'})

1
aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts
View File

@ -1,3 +1,4 @@
// tslint:disable: no-output-native
// #docregion
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { HeroTaxReturn } from './hero';

7
aio/content/examples/inputs-outputs/src/app/aliasing/aliasing.component.ts
View File

@ -1,9 +1,4 @@
/* tslint:disable:use-input-property-decorator */
/* tslint:disable:use-output-property-decorator */
/* tslint:disable:no-input-rename */
// tslint:disable: no-input-rename no-output-rename use-input-property-decorator use-output-property-decorator
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({

2
aio/content/examples/lifecycle-hooks/e2e/src/app.e2e-spec.ts
View File

@ -135,7 +135,7 @@ describe('Lifecycle hooks', () => {
const inputEle = element(by.css('spy-parent input'));
const addHeroButtonEle = element(by.cssContainingText('spy-parent button', 'Add Hero'));
const resetHeroesButtonEle = element(by.cssContainingText('spy-parent button', 'Reset Heroes'));
const heroEles = element.all(by.css('spy-parent div[mySpy'));
const heroEles = element.all(by.css('spy-parent div[appSpy'));
const logEles = element.all(by.css('spy-parent h4 ~ div'));
expect(heroEles.count()).toBe(2, 'should have two heroes displayed');

2
aio/content/examples/lifecycle-hooks/src/app/counter.component.ts
View File

@ -13,7 +13,7 @@ import { LoggerService } from './logger.service';
Counter = {{counter}}
<h5>-- Counter Change Log --</h5>
<div *ngFor="let chg of changeLog" mySpy>{{chg}}</div>
<div *ngFor="let chg of changeLog" appSpy>{{chg}}</div>
</div>
`,
styles: ['.counter {background: LightYellow; padding: 8px; margin-top: 8px}']

2
aio/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts
View File

@ -1,3 +1,5 @@
// tslint:disable: no-conflicting-lifecycle
// #docregion
import {
AfterContentChecked,
AfterContentInit,

2
aio/content/examples/lifecycle-hooks/src/app/spy.component.html
View File

@ -7,7 +7,7 @@
<p></p>
<!-- #docregion template -->
<div *ngFor="let hero of heroes" mySpy class="heroes">
<div *ngFor="let hero of heroes" appSpy class="heroes">
{{hero}}
</div>
<!-- #enddocregion template -->

4
aio/content/examples/lifecycle-hooks/src/app/spy.directive.ts
View File

@ -7,8 +7,8 @@ let nextId = 1;
// #docregion spy-directive
// Spy on any element to which it is applied.
// Usage: <div mySpy>...</div>
@Directive({selector: '[mySpy]'})
// Usage: <div appSpy>...</div>
@Directive({selector: '[appSpy]'})
export class SpyDirective implements OnInit, OnDestroy {
constructor(private logger: LoggerService) { }

5
aio/content/examples/observables-in-angular/src/main.ts
View File

@ -1,11 +1,12 @@
// tslint:disable: no-output-native
// #docregion
import { Component, Output, OnInit, EventEmitter, NgModule } from '@angular/core';
import { Observable } from 'rxjs';
// #docregion eventemitter
@Component({
selector: 'zippy',
selector: 'app-zippy',
template: `
<div class="zippy">
<div (click)="toggle()">Toggle</div>

1
aio/content/examples/styleguide/src/02-08/app/shared/input-highlight.directive.ts
View File

@ -1,3 +1,4 @@
// tslint:disable: directive-selector
// #docregion
import { Directive, ElementRef } from '@angular/core';

1
aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-highlight.directive.ts
View File

@ -1,3 +1,4 @@
// tslint:disable: directive-selector
// #docregion
import { Directive, ElementRef, Input, OnChanges } from '@angular/core';

1
aio/content/examples/styleguide/src/06-03/app/shared/validator2.directive.ts
View File

@ -1,3 +1,4 @@
// tslint:disable: no-host-metadata-property
// #docregion
import { Directive } from '@angular/core';

2
aio/content/examples/testing/src/app/demo/demo.ts
View File

@ -1,4 +1,4 @@
/* tslint:disable:forin */
// tslint:disable: directive-selector forin no-input-rename
import { Component, ContentChildren, Directive, EventEmitter,
Injectable, Input, Output, Optional,
HostBinding, HostListener,

1
aio/content/examples/testing/src/app/shared/highlight.directive.ts
View File

@ -1,3 +1,4 @@
// tslint:disable: directive-selector
// #docregion
import { Directive, ElementRef, Input, OnChanges } from '@angular/core';

2
aio/content/examples/testing/src/testing/router-link-directive-stub.ts
View File

@ -3,7 +3,7 @@ import { Directive, Input, HostListener } from '@angular/core';
// export for convenience.
export { RouterLink} from '@angular/router';
/* tslint:disable:directive-class-suffix */
// tslint:disable: directive-class-suffix directive-selector
// #docregion router-link
@Directive({
selector: '[routerLink]'

1
aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts
View File

@ -1,3 +1,4 @@
// tslint:disable: directive-selector
// #docregion
export const heroDetail = {
bindings: {

1
aio/content/examples/upgrade-module/src/app/upgrade-io/hero-detail.component.ts
View File

@ -1,3 +1,4 @@
// tslint:disable: directive-selector
// #docregion
// #docregion hero-detail-io
export const heroDetail = {

1
aio/content/examples/upgrade-module/src/app/upgrade-static/hero-detail.component.ts
View File

@ -1,3 +1,4 @@
// tslint:disable: directive-selector
// #docregion
// #docregion hero-detail
export const heroDetail = {

4
aio/content/guide/dynamic-component-loader.md
View File

@ -42,7 +42,7 @@ mark valid insertion points in the template.
`AdDirective` injects `ViewContainerRef` to gain access to the view
container of the element that will host the dynamically added component.
In the `@Directive` decorator, notice the selector name, `ad-host`;
In the `@Directive` decorator, notice the selector name, `adHost`;
that's what you use to apply the directive to the element.
The next section shows you how.
@ -56,7 +56,7 @@ decorator's `template` property as a template string.
The `<ng-template>` element is where you apply the directive you just made.
To apply the `AdDirective`, recall the selector from `ad.directive.ts`,
`ad-host`. Apply that to `<ng-template>` without the square brackets. Now Angular knows
`[adHost]`. Apply that to `<ng-template>` without the square brackets. Now Angular knows
where to dynamically load components.

2
aio/content/guide/observables-in-angular.md
View File

@ -14,7 +14,7 @@ When you call `emit()`, it passes the emitted value to the `next()` method of an
A good example of usage can be found in the [EventEmitter](api/core/EventEmitter) documentation. Here is the example component that listens for open and close events:
`<zippy (open)="onOpen($event)" (close)="onClose($event)"></zippy>`
`<app-zippy (open)="onOpen($event)" (close)="onClose($event)"></app-zippy>`
Here is the component definition: