Después de leer esta sección sobre la interacción de los componentes , me di cuenta de que hay otra forma de comunicarse de niño a padre (que en realidad no estaba documentada allí):
Resulta que si tengo una clase principal:
@Component({ selector: 'my-app', template: ` <div> <h2>Hello {{name}}</h2> <my-item></my-item> </div> `, }) export class App { name:string; go1() { alert(2) } constructor() {} } Y en el componente secundario, parent un tipo principal en el ctor:
@Component({ selector: 'my-item', template: ` <div> <input type="button" value='invoke parent method' (click) = "myGo()"/> </div> `, }) class MyItem { name:string; private parent1 : App; myGo() { this.parent1.go1() //<--- access is available here } constructor(private parent1 : App) { this.parent1 = parent1; //<------------ manually, unlike service this.name = `Angular! v${VERSION.full}` } }Luego, Angular ve que estoy tratando de inyectar una clase de tipo principal y me da acceso a ella.
El clic funciona, por supuesto.
Pregunta:
Además de otras alternativas que ya conozco, ¿está documentado en alguna parte? o es solo una característica en la que no puedo confiar
Esto funciona bien y se puede utilizar.
Una desventaja importante es que rompe la encapsulación. El componente secundario necesita saber sobre el componente principal. Este enfoque hace que el elemento secundario se acople estrechamente a su elemento principal, lo que generalmente se considera algo malo porque evita que el componente se reutilice en cualquier lugar dentro de su aplicación, ya que ahora solo funciona como elemento secundario de este elemento principal exacto.