mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
docs: Update router docs to add references and components input fixed syntaxis
(cherry picked from commit 2ac826867b)
This commit is contained in:
parent
9d6b86958a
commit
a62162d2ee
4 changed files with 24 additions and 4 deletions
|
|
@ -10,7 +10,7 @@ When you use a component, you commonly want to pass some data to it. A component
|
|||
```ts {highlight:[5]}
|
||||
import {Component, input} from '@angular/core';
|
||||
|
||||
@Component({/_..._/})
|
||||
@Component({/*...*/})
|
||||
export class CustomSlider {
|
||||
// Declare an input named 'value' with a default value of zero.
|
||||
value = input(0);
|
||||
|
|
@ -60,7 +60,7 @@ The `input` function returns an `InputSignal`. You can read the value by calling
|
|||
```ts {highlight:[5]}
|
||||
import {Component, input, computed} from '@angular/core';
|
||||
|
||||
@Component({/_..._/})
|
||||
@Component({/*...*/})
|
||||
export class CustomSlider {
|
||||
// Declare an input named 'value' with a default value of zero.
|
||||
value = input(0);
|
||||
|
|
@ -146,7 +146,7 @@ Angular includes two built-in transform functions for the two most common scenar
|
|||
```ts
|
||||
import {Component, input, booleanAttribute, numberAttribute} from '@angular/core';
|
||||
|
||||
@Component({/_..._/})
|
||||
@Component({/*...*/})
|
||||
export class CustomSlider {
|
||||
disabled = input(false, {transform: booleanAttribute});
|
||||
value = input(0, {transform: numberAttribute});
|
||||
|
|
@ -220,7 +220,7 @@ See [Two-way binding](guide/templates/two-way-binding) for more details on two-w
|
|||
|
||||
You can bind a plain JavaScript property to a model input.
|
||||
|
||||
```ts
|
||||
```angular-ts
|
||||
@Component({
|
||||
/* ... */
|
||||
// `value` is a model input.
|
||||
|
|
|
|||
|
|
@ -199,6 +199,7 @@ export interface RouterOutletContract {
|
|||
*
|
||||
* @see {@link RouterLink}
|
||||
* @see {@link Route}
|
||||
* @see [Show routes with outlets](guide/routing/show-routes-with-outlets)
|
||||
* @ngModule RouterModule
|
||||
*
|
||||
* @publicApi
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ import {RouterConfigLoader} from './router_config_loader';
|
|||
*
|
||||
* Provides a preloading strategy.
|
||||
*
|
||||
* @see [Preloading strategy](guide/routing/customizing-route-behavior#preloading-strategy)
|
||||
* @publicApi
|
||||
*/
|
||||
export abstract class PreloadingStrategy {
|
||||
|
|
@ -35,6 +36,20 @@ export abstract class PreloadingStrategy {
|
|||
* RouterModule.forRoot(ROUTES, {preloadingStrategy: PreloadAllModules})
|
||||
* ```
|
||||
*
|
||||
* ```ts
|
||||
* export const appConfig: ApplicationConfig = {
|
||||
* providers: [
|
||||
* provideRouter(
|
||||
* routes,
|
||||
* withPreloading(PreloadAllModules)
|
||||
* )
|
||||
* ]
|
||||
* };
|
||||
* ```
|
||||
*
|
||||
*
|
||||
* @see [Preloading strategy](guide/routing/customizing-route-behavior#preloading-strategy)
|
||||
*
|
||||
* @publicApi
|
||||
*/
|
||||
@Injectable({providedIn: 'root'})
|
||||
|
|
@ -51,6 +66,8 @@ export class PreloadAllModules implements PreloadingStrategy {
|
|||
*
|
||||
* This strategy is enabled by default.
|
||||
*
|
||||
* @see [Preloading strategy](guide/routing/customizing-route-behavior#preloading-strategy)
|
||||
*
|
||||
* @publicApi
|
||||
*/
|
||||
@Injectable({providedIn: 'root'})
|
||||
|
|
|
|||
|
|
@ -15,6 +15,8 @@ import {UrlTree} from './url_tree';
|
|||
*
|
||||
* Provides a way to migrate AngularJS applications to Angular.
|
||||
*
|
||||
* @see [URL handling strategy](guide/routing/customizing-route-behavior#built-in-preloading-strategies)
|
||||
*
|
||||
* @publicApi
|
||||
*/
|
||||
@Injectable({providedIn: 'root', useFactory: () => inject(DefaultUrlHandlingStrategy)})
|
||||
|
|
|
|||
Loading…
Reference in a new issue