Угловой — общий ngOnInit

Если у меня есть в каждом компоненте

ngOnInit() {
  console.log('hello world');
}

Как избежать написания этого кода в каждом компоненте? Могу ли я написать какой-нибудь общий код, который будет запускать onInit для каждого компонента, может быть, в их модуле? Или в их общем сервисе они все используют, например?

У меня тот же вопрос о NavigationStart и NavigationEnd.

Спасибо


angular boilerplate ngoninit
person Dalibor    schedule 15.07.2020    source источник
comment
вы можете создать собственный декоратор, netbasal.com/   -  person Eliseo    schedule 15.07.2020
comment
Пожалуйста, предоставьте больше информации о вашей фактической цели.   -  person Mike S.    schedule 15.07.2020
comment
Что это значит? Цель состоит в том, чтобы избежать шаблонного. Цель состоит в том, чтобы уведомить пользователя об инициализации компонента. Что бы ни. Однако Дмитрий Соболевский дал отличный ответ.   -  person Dalibor    schedule 15.07.2020

Ответы (2)


arrow_upward
1
arrow_downward

Самый простой способ сделать это — расширить базовый компонент:

@Component({
    selector: 'base-component',
    template: '',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class BaseComponent implements OnInit {

 ngOnInit (): void {
  console.log('hello world');
 }
}

и используйте extends BaseComponent в своих дочерних компонентах, например:

@Component({
    selector: 'child-component',
    template: '',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent extends BaseComponent {
  // your logic
}

Другой способ: использование службы с локальным поставщиком для каждого компонента:

@Injectable()
export class ActionService {
 constructor(){
   console.log('hello world');
 }
}

и внедрить его (providers: [ActionService]) в ваш компонент, который должен иметь эту логику, каждый компонент будет иметь отдельный экземпляр этой службы:

@Component({
    selector: 'main-page',
    templateUrl: './main-page.component.html',
    styleUrls: ['./main-page.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [ActionService]
})
export class MainPageComponent {}

как по мне: первое решение намного лучше, чем каждый раз обслуживать, но решать вам :)

person Dmitry Sobolevsky    schedule 15.07.2020
comment
Отличный ответ, четкий и понятный. Благодарю вас! - person Dalibor; 15.07.2020

arrow_upward
-1
arrow_downward

Я предлагаю вам создать служебный класс со статическими методами.

Допустим, вы хотите печатать hello world каждый раз при инициализации компонента:

утилита.ts:

class Utility {
    static printHelloWorld() {
        console.log("Hello world");
    }
}

В компоненте.тс:

Во-первых, импортируйте служебный класс как:

import Utility from './path/to/utility/class';

Затем в методе ngOnInit:

ngOnInit() {
   Utility.printHelloWorld();
}
person Goutam B Seervi    schedule 15.07.2020
comment
Это просто замена одной строки в каждом компоненте на другую. Ничего не решает. - person Dalibor; 15.07.2020