рд╣реЗрд▓реЛ, рд╣реЗрдмреНрд░! рдореИрдВ рдЖрдкрдХреЛ рд▓реЗрдЦ "рдиреЗрдЯрд╛рд▓ рдореЗрдВ рдПрдХ рдШрдЯрдХ рдХреЛ рдЗрдирдкреБрдЯ рдкрд╛рд╕ рдХрд░рдиреЗ рдХреЗ рд╡рд┐рднрд┐рдиреНрди рддрд░реАрдХреЗ" рдХрд╛ рдЕрдиреБрд╡рд╛рдж рдкреНрд░рд╕реНрддреБрдд рдХрд░рддрд╛ рд╣реВрдВ ред
рдЗрд╕ рд▓реЗрдЦ рдореЗрдВ, рд╣рдо рдбреЗрдЯрд╛ рдХреЛ рдПрдХ рдШрдЯрдХ рдореЗрдВ рд╕реНрдерд╛рдирд╛рдВрддрд░рд┐рдд рдХрд░рдиреЗ рдХреЗ рддреАрди рдЕрд▓рдЧ-рдЕрд▓рдЧ рддрд░реАрдХреЛрдВ рдХрд╛ рд╡рд┐рд╢реНрд▓реЗрд╖рдг рдХрд░реЗрдВрдЧреЗред рдирд┐рдореНрдирд▓рд┐рдЦрд┐рдд рдЙрджрд╛рд╣рд░рдг рдореЗрдВ, рд╣рдо рдореБрдЦреНрдп рдШрдЯрдХ рдХреЗ рд░реВрдк рдореЗрдВ рдЪрдпрди рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВрдЧреЗ, рд▓реЗрдХрд┐рди рдЗрд╕рдореЗрдВ рдЙрдкрдпреЛрдЧ рдХрд┐рдП рдЧрдП рддрд░реАрдХреЗ рдЕрдиреНрдп рдШрдЯрдХреЛрдВ рдореЗрдВ рдкреНрд░рд╛рд╕рдВрдЧрд┐рдХ рд╣реИрдВредрдПрдХ рдЪрдпрдирд┐рдд рдШрдЯрдХ рдмрдирд╛рдПрдВ рдЬреЛ рдирд┐рдореНрдирд▓рд┐рдЦрд┐рдд рдЗрдирдкреБрдЯ рдкреНрд░рд╛рдкреНрдд рдХрд░рддрд╛ рд╣реИ - рдЖрдХрд╛рд░ рдФрд░ рд╕реНрдерд╛рди редрдЗрдирдкреБрдЯреНрд╕ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛
рдкрд╣рд▓реА рд╡рд┐рдзрд┐ рдЬрд┐рд╕рд╕реЗ рд╣рдо рд╕рднреА рдкрд░рд┐рдЪрд┐рдд рд╣реИрдВ, рд╡рд╣ рдЗрдирдкреБрдЯ рдбреЗрдХреЛрд░реЗрдЯрд░ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣реА рд╣реИ ред@Component({
selector: 'app-select',
template: `
<p><b>Size</b> {{ size }}</p>
<p><b>Placement:</b> {{ placement }}</p>
`
})
export class SelectComponent {
@Input() size: 'sm' | 'md' | 'lg' = 'md';
@Input() placement: 'top' | 'bottom' | 'right' | 'left' = 'bottom'
}
рдФрд░ рдпрд╣ рдХреЛрдб рдмрд╣реБрдд рдЕрдЪреНрдЫрд╛ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ, рд╕рд┐рд╡рд╛рдп рдЗрд╕рдХреЗ рдХрд┐ рдпрд╣ рдЗрддрдирд╛ рд▓рдЪреАрд▓рд╛ рдирд╣реАрдВ рд╣реИред рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, рд╣рдореЗрдВ рдЕрдкрдиреЗ рдПрдкреНрд▓рд┐рдХреЗрд╢рди рдореЗрдВ рдХрд┐рд╕реА рднреА рдЪрдпрди рдХреЗ рд▓рд┐рдП рдмрдбрд╝реЗ рдЖрдХрд╛рд░ рдХреЗ рдЪрд░ рдХреЛ рд╕реЗрдЯ рдХрд░рдирд╛ рд╣реЛрдЧрд╛ ред рдЗрд╕рд▓рд┐рдП, рд╣рдореЗрдВ рдЧреНрд░рд╛рд╣рдХ рдХреЛ рд╡рд┐рд╢реНрд╡ рд╕реНрддрд░ рдкрд░ рдХрд┐рд╕реА рднреА рдЗрдирдкреБрдЯ рдХреЛ рдлрд┐рд░ рд╕реЗ рд▓рд┐рдЦрдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрдиреА рдЪрд╛рд╣рд┐рдПредрдЗрдВрдЬреЗрдХреНрд╢рди рдирд┐рд░реНрднрд░рддрд╛ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛
рдРрд╕рд╛ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП, рд╣рдо рдХреЛрдгреАрдп рдирд┐рд░реНрднрд░рддрд╛ рдЗрдВрдЬреЗрдХреНрд╢рди рдлрд╝рдВрдХреНрд╢рди рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВредimport { InjectionToken, Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class SelectConfig {
size: 'sm' | 'md' | 'lg' = 'md'
placement: 'top' | 'bottom' | 'right' | 'left' = 'bottom';
}
export function setSelectConfig(config: Partial<SelectConfig>) {
return {
...new SelectConfig(),
...config
}
}
рдкрд╣рд▓реЗ рд╣рдореЗрдВ рдПрдХ рдкреНрд░рджрд╛рддрд╛ рдХреЙрдиреНрдлрд╝рд┐рдЧрд░реЗрд╢рди рдмрдирд╛рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИред рдЗрд╕ рдкреНрд░рджрд╛рддрд╛ рдХрд╛ рдЙрдкрдпреЛрдЧ рдЯреЛрдХрди рдХреЗ рд░реВрдк рдореЗрдВ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ , рдЯрд╛рдЗрдк рдХрд░ рд╕рдХрддрд╛ рд╣реИ рдФрд░ рдкреНрд░рддреНрдпреЗрдХ рдЗрдирдкреБрдЯ рдХреЗ рд▓рд┐рдП рдбрд┐рдлрд╝реЙрд▓реНрдЯ рдорд╛рди рднреА рд╕реЗрдЯ рдХрд░ рд╕рдХрддрд╛ рд╣реИ ред рд╣рдо рдЕрдкрдиреЗ рдЪреБрдирд┐рдВрджрд╛ рдШрдЯрдХ рдореЗрдВ рдЗрд╕рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╣реИрдВ :@Component({
selector: 'app-select',
template: `
<p><b>Size</b> {{ size }}</p>
<p><b>Placement:</b> {{ placement }}</p>
`
})
export class SelectComponent {
@Input() size: SelectConfig['size'];
@Input() placement: SelectConfig['placement'];
constructor(private config: SelectConfig) {
this.size = config.size;
this.placement = config.placement;
}
}
рдЕрдм рд╣рдо рдЕрдкрдиреЗ рдЖрд╡реЗрджрди рдХреЗ рд╕реНрддрд░ рдкрд░ рдЪрдпрдирд┐рдд рдЗрдирдкреБрдЯ рдХреЛ рдлрд┐рд░ рд╕реЗ рд▓рд┐рдЦ рд╕рдХрддреЗ рд╣реИрдВ:@NgModule({
providers: [
{
provide: SelectConfig,
useValue: setSelectConfig({
size: 'lg'
})
}
]
bootstrap: [AppComponent]
})
export class AppModule { }
рд▓реЗрдХрд┐рди рд╡рд╣ рд╕рдм рдирд╣реАрдВ рд╣реИред рд╣рдо рдЗрд╕рдХрд╛ рдЙрдкрдпреЛрдЧ рдШрдЯрдХ рд╕реНрддрд░ рдкрд░ рд╡рд┐рднрд┐рдиреНрди рдЖрджрд╛рдиреЛрдВ рдХреЛ рдкрд╛рд░рд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рднреА рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ ред рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, рд╣рдорд╛рд░реЗ рдкрд╛рд╕ рдПрдХ рдШрдЯрдХ рд╣реИ рдЬрд┐рд╕реЗ рд╣рдо рдПрдкреНрд▓рд┐рдХреЗрд╢рди рдореЗрдВ рдХрдИ рдмрд╛рд░ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╣реИрдВред рдкреНрд░рддреНрдпреЗрдХ рдорд╛рдорд▓реЗ рдореЗрдВ, рд╣рдореЗрдВ рдЫреЛрдЯреЗ рдореВрд▓реНрдп рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ :@Component({
selector: 'app-todos-page',
template: `<app-select></app-select>`,
providers: [
{
provide: SelectConfig,
useValue: setSelectConfig({
size: 'sm'
})
}
]
})
export class TodosPageComponent {}
рд╣рдо рдЗрд╕реЗ рдкреНрд░рджрд╛рддрд╛рдУрдВ рдХреЗ рдШрдЯрдХ рдореЗрдВ рдЬреЛрдбрд╝ рд╕рдХрддреЗ рд╣реИрдВ рдФрд░ рдЗрд╕ рдореВрд▓реНрдп рдХрд╛ рдЙрдкрдпреЛрдЧ рд╕рднреА рдШрдЯрдХреЛрдВ рдХреЗ рд▓рд┐рдП рдФрд░ рдЯреЗрдореНрдкрд▓реЗрдЯреНрд╕ рдореЗрдВ рдмрдЪреНрдЪреЗ рдХреЗ рд▓рд┐рдП рдХрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛ред рд▓реЗрдХрд┐рди рд╣рдо рдЕрднреА рднреА рдЗрд╕ рдЪрд░ рдХреЛ рдЗрд╕ рдкреНрд░рдХрд╛рд░ рд╕реАрдзреЗ рд▓рд┐рдЦ рд╕рдХрддреЗ рд╣реИрдВ:@Component({
selector: 'app-todos-page',
template: `
<app-select></app-select>
<app-select size="lg"></app-select>
`,
providers: [
{
provide: SelectConfig,
useValue: setSelectConfig({
size: 'sm'
})
}
]
})
export class TodosPageComponent {}
рдПрдХ рд╣реА рд░рдгрдиреАрддрд┐ рдХрд╛ рдЙрдкрдпреЛрдЧ рдЖрд▓рд╕реА рдореЙрдбреНрдпреВрд▓ рдХреЗ рд▓рд┐рдП рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ рдХреНрдпреЛрдВрдХрд┐ рдпрд╣ рдПрдХ рдирдпрд╛ рдЗрдВрдЬреЗрдХреНрд╢рди рдмрдирд╛рддрд╛ рд╣реИредрдирд┐рд░реНрджреЗрд╢реЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛
рдорд╛рди рд▓реАрдЬрд┐рдП рдХрд┐ рд╣рдорд╛рд░реЗ рдкрд╛рд╕ рдмрд╣реБрдд рд╕рд╛рд░реЗ рдЗрдирдкреБрдЯ рдХреЗ рд╕рд╛рде рдШрдЯрдХ рд╣реИрдВред рд╣рдо рдЙрдирдореЗрдВ рд╕реЗ рдЕрдзрд┐рдХрд╛рдВрд╢ рдХреЗ рд▓рд┐рдП рд╕рдорд╛рди рдореВрд▓реНрдп рдирд┐рд░реНрдзрд╛рд░рд┐рдд рдХрд░рддреЗ рд╣реИрдВред рдЙрджрд╛рд╣рд░рдг рдореЗрдВ, рдпрд╣ рдЗрд╕ рддрд░рд╣ рджрд┐рдЦреЗрдЧрд╛:
<app-select size="lg" position="right" inputThree="someValue"></app-select>
<app-select size="lg" position="right" inputThree="someValue"></app-select>
<app-select size="lg" position="right inputThree="someValue"></app-select>
<app-select size="lg" position="right" inputThree="someValue"></app-select>
<app-select size="lg" position="right" inputThree="someValue"></app-select>
рд╣рдо рдЗрди рдореВрд▓реНрдпреЛрдВ рдХреЛ рджреЛрд╣рд░рд╛ рд╕рдХрддреЗ рд╣реИрдВ, рд▓реЗрдХрд┐рди рд╣рдо рдПрдХ рдирд┐рд░реНрджреЗрд╢ рдмрдирд╛ рд╕рдХрддреЗ рд╣реИрдВ рдЬреЛ рд╕рднреА рдЪрд░ рдХреЗ рдЖрд╡рд╢реНрдпрдХ рдореВрд▓реНрдпреЛрдВ рдХреЛ рдкрд╛рд░рд┐рдд рдХрд░реЗрдЧрд╛:@Directive({
selector: '[selectConfigOne]',
providers: [{
provide: SelectConfig,
useValue: setSelectConfig({
size: 'lg',
placement: 'right',
inputThree: 'someValue'
})
}]
})
export class SelectConfigOneDirective {}
рдФрд░ рд╣рдо рдЗрд╕ рдирд┐рд░реНрджреЗрд╢ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рдЬрд╣рд╛рдБ рд╣рдореЗрдВ рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ:<h1>Using Inputs</h1>
<app-select size="lg"></app-select>
<app-select placement="top"></app-select>
<h1>Using a Directive</h1>
<app-select selectConfigOne></app-select>
<app-todos-page></app-todos-page>