mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
docs: fix type code block language
fix type code block language
This commit is contained in:
parent
7d483f28a4
commit
acd6f690bd
2 changed files with 23 additions and 20 deletions
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
This diagnostic detects unreachable or redundant triggers in `@defer` blocks.
|
||||
|
||||
```typescript
|
||||
```angular-ts
|
||||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
|
|
@ -31,7 +31,7 @@ This diagnostic flags the following problematic patterns:
|
|||
|
||||
**Bad — prefetch never runs**
|
||||
|
||||
```typescript
|
||||
```angular-ts
|
||||
@Component({
|
||||
template: `
|
||||
@defer (on immediate; prefetch on idle) {
|
||||
|
|
@ -44,7 +44,7 @@ class MyComponent {}
|
|||
|
||||
**Good — remove redundant prefetch**
|
||||
|
||||
```typescript
|
||||
```angular-ts
|
||||
@Component({
|
||||
template: `
|
||||
@defer (on immediate) {
|
||||
|
|
@ -59,7 +59,7 @@ class MyComponent {}
|
|||
|
||||
**Bad — prefetch is later than main**
|
||||
|
||||
```typescript
|
||||
```angular-ts
|
||||
@Component({
|
||||
template: `
|
||||
@defer (on timer(100ms); prefetch on timer(3000ms)) {
|
||||
|
|
@ -72,7 +72,7 @@ class MyComponent {}
|
|||
|
||||
**Bad — equal timing provides no benefit**
|
||||
|
||||
```typescript
|
||||
```angular-ts
|
||||
@Component({
|
||||
template: `
|
||||
@defer (on timer(500ms); prefetch on timer(500ms)) {
|
||||
|
|
@ -85,7 +85,7 @@ class MyComponent {}
|
|||
|
||||
**Good — prefetch fires earlier**
|
||||
|
||||
```typescript
|
||||
```angular-ts
|
||||
@Component({
|
||||
template: `
|
||||
@defer (on timer(1000ms); prefetch on timer(500ms)) {
|
||||
|
|
@ -100,7 +100,7 @@ class MyComponent {}
|
|||
|
||||
**Bad — identical viewport trigger**
|
||||
|
||||
```typescript
|
||||
```angular-ts
|
||||
@Component({
|
||||
template: `
|
||||
@defer (on viewport; prefetch on viewport) {
|
||||
|
|
@ -113,7 +113,7 @@ class MyComponent {}
|
|||
|
||||
**Bad — identical interaction target**
|
||||
|
||||
```typescript
|
||||
```angular-ts
|
||||
@Component({
|
||||
template: `
|
||||
<button #loadBtn>Load</button>
|
||||
|
|
@ -127,7 +127,7 @@ class MyComponent {}
|
|||
|
||||
**Good — remove redundant prefetch**
|
||||
|
||||
```typescript
|
||||
```angular-ts
|
||||
@Component({
|
||||
template: `
|
||||
<button #loadBtn>Load</button>
|
||||
|
|
@ -141,7 +141,7 @@ class MyComponent {}
|
|||
|
||||
**Good — use different targets for prefetch and main**
|
||||
|
||||
```typescript
|
||||
```angular-ts
|
||||
@Component({
|
||||
template: `
|
||||
<div #hoverArea>Hover to prefetch</div>
|
||||
|
|
|
|||
|
|
@ -36,18 +36,21 @@ class MyComponent {}
|
|||
|
||||
If a conditional is necessary, you can wrap the component in an `*ngIf`.
|
||||
|
||||
```html
|
||||
import {Component} from '@angular/core'; @Component({ template: `
|
||||
```angular-ts
|
||||
import {Component} from '@angular/core';
|
||||
|
||||
<div \*ngIf="hasUser; else noUser">
|
||||
<user-viewer ngSkipHydration />
|
||||
</div>
|
||||
@Component({
|
||||
template: `
|
||||
<div *ngIf="hasUser; else noUser">
|
||||
<user-viewer ngSkipHydration />
|
||||
</div>
|
||||
|
||||
<ng-template #noUser>
|
||||
<user-viewer />
|
||||
</ng-template>
|
||||
|
||||
`, }) class MyComponent {}
|
||||
<ng-template #noUser>
|
||||
<user-viewer />
|
||||
</ng-template>
|
||||
`,
|
||||
})
|
||||
class MyComponent {}
|
||||
```
|
||||
|
||||
## Configuration requirements
|
||||
|
|
|
|||
Loading…
Reference in a new issue