Geek Answers Handbook

Why should all components with component selectors be used in an Angular 2 application?

Keep in mind that I work with the tutorial code here, so not everything is strictly correct, but it works. Most part of time.

I have a component class that is styled as follows:

@Component({ selector: "click-here", template: ` <button (click) = "onClickThere($event)">Click here!</button> {{clickMessage}} ` })

And it was used as follows:

 <body> <click-here>Loading...</click-here> </body>

Then I added a new component class, but its decorator has:

selector: "type-here"

When I launch the application with npm start , I get a legion of errors in the browser, starting with:

The selector "click-here" did not match any elements

Why should each selector match an element? It is impossible to work this way; there should be a way to have multiple Component decorators, all with different selector values, and use only some of them. How do I achieve this? What am I doing wrong that the correct version is not included in the textbook? Should each Component have a name or something else?

+5
source share
2 answers

This only applies to the element that you create with bootstrap(MyComponent) .

If you download the component and disagree with the selector, Angular does not know where to put it. Angular uses a selector to find a place to insert a component in the DOM.

It also means that you can load one component only once inside your page. Support for overriding the selector is planned when the component is passed to bootstrap() , but it is not currently supported.

See also https://github.com/angular/angular/issues/7136

For components used inside MyComponent , this does not matter. You can have as many components as you want and use only what you need.

0
source

Components are always associated with the html tag, like other html. The component included a class, but there is a class that cannot be a component.

The component is similar to another html tag that you know, for example, span, div, but the new one that you create, and you can determine what is inside.

Components can be organized like a tree. agree in the last lesson, before using the component you should always have the main component (main.ts), the module component (app.module.ts) and the application component (app.component.ts), the same for index.html, you can see more in the textbook; therefore it is better to copy all the files, and you play or test your component in app.component.ts if you want to test only the component; but better you have child components, most of the time app.component is associated with the my-app tag:

 <body> <my-app>Loading...</my-app> </body>

tutorial link: https://angular.io/docs/ts/latest/tutorial/toh-pt1.html

0
source

More articles:


All Articles