Geek Answers Handbook

@Input and other decorators and inheritance

I really don't understand how object binding works, so if someone can explain if I can use @Input () inside the base class or better: decorators and inheritance. For example, if each form should receive a client, I have a base class:

export class AbstractCustomerForm{ @Input() customer; ... }

and then I extend this class in the actual component:

 export AwesomeCustomerForm extends AbstractCustomerForm implements OnInit{ ngOnInit(){ if(this.customer) doSomething(); } }

but this will not work, the client will never be installed :(

+6
source share
6 answers

Update

Inheritance is correctly supported since 2.3.0-rc.0

original

Decorators are not inherited. They must be applied to the class used directly as a component. Decorators on subclasses are ignored. I saw him mention that @Input() or @Output() work if only the superclass has them and the subclass doesn't.

+8
source

One strategy I'm following looks something like this:

 @Component({ selector: 'my-component', template: `......`, inputs: MyAbstractComponent.genericInputs }) export class MyComponent extends MyAbstractComponent { @Input() width: number = 200; ........ }

Where:

 export abstract class MyAbstractComponent { public static genericInputs : string[] = ['base']; public base: String; }

so MyComponent will get base as well as width bindings. In fact, I think there is an opportunity to improve the situation using reflection.

+5
source

Even in Angular 4.2.4, it works fine in dev mode. But when building the prod ( ng build -prod ) ng build -prod this breaks:

 ERROR in Template parse errors: Can't bind to 'step' since it isn't a known property of 'app-textarea-step'. 1. If 'app-textarea-step' is an Angular component and it has 'step' input, then verify that it is part of this module. 2. If 'app-textarea-step' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

My component looks like this:

 abstract class StepComponent { @Input() step: BaseStep; @Output() next = new EventEmitter<string>(); @Output() answer = new EventEmitter<Answer>(); } abstract class SingleNextStepComponent extends StepComponent { onSubmit(answer: string) { // ConfirmStep heeft geen answer. if (answer) { this.answer.emit({ question: this.step.key, value: answer }); } const step = this.step as SingleNextStep; this.next.emit(step.next); } } // Decorator inheritance works in standard build (ng build) but fails in production build (ng build -prod) // Workaround: inputs element on @Component that contains the inputs..... @Component({ selector: 'app-textbox-step', templateUrl: './textbox-step.component.html', inputs: ['step'] }) export class TextboxStepComponent extends SingleNextStepComponent { } @Component({ selector: 'app-textarea-step', templateUrl: './textarea-step.component.html', }) export class TextareaStepComponent extends SingleNextStepComponent { }

Fortunately, a workaround works. The inputs added to the TextBoxStepComponent prevented this from failing, moving on to the next one, the "inputs" have not yet been provided.

But "ng build" works fine without requiring input on @Component decorators ...

+2
source

I found a possible solution here:

https://medium.com/@ttemplier/angular2-decorators-and-class-inheritance-905921dbd1b7#.ca68alvcz

Basically, it creates a custom Decorator that simply combines the parent and child decorators through reflection.

Actually, I cannot work on projects based on angular-cli.

+1
source

Decorators are not inherited, but a class. Therefore, my solution was as follows:

 @Component({selector: 'a') class A { @Input() field; } @Component({selector: 'b', inputs: ['field']} class B extends A { }
0
source

I came across this question and just wanted to point out that with Angular 2.3.0-rc.0 this is really possible.

The semantics of inheritance:

decorators:

1) list the decorators of the class and its parents in the original order of the ancestor

2) use only the last decorator of each type (e.g. @Component / ...)

Designer Parameters:

If a class inherits from the parent class and does not declare a constructor, it inherits the constructor of the parent class, and with it the metadata of the parameters of this parent class.

Life Cycle Traps:

Follow the usual model of class inheritance, i.e. lifecycle hooks of the parent classes will be called even if the method is not overwritten in the child class.

https://github.com/angular/angular/commit/f5c8e09

0
source

More articles:


All Articles