Angular 6 - @Input повторяет вывод 4 раза вместо одного

Question

У меня есть два компонента в угловом проекте.

Вот код для обоих:

app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  msg() {
    console.log('my message');
  }

}

app.component.html:

<app-child [message]="msg()"></app-child>

child.component.ts:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  @Input() message: string;

  constructor() {}

  ngOnInit() {
  }

}

child.component.html

{{ message }}

Как видите, msg () выведет сообщение на консоль.

Проблема в том, что сообщение консоли повторяется4 раза, а не 1

Как я могу это исправить, чтобы просто запустить msg () один раз?

Answer 1

Я не понимаю, почему вы пытаетесь передать функцию внутри Input, но я разрабатываю следующий пример в stackblitz ,

Взгляните на компонент приложения .ts

export class AppComponent implements OnInit  {

  message: string;
  ngOnInit() {
    this.msg();
  }
  msg(){
    this.message = "Show Message";
    console.log("Messsaje");
  }
}

HTML

<app-child [message]="message"></app-child>