Angular2 Routing: what does it mean that it instantiates a related component?

Question

I teach myself Angular2, and the text I'm looking for says:

The router finds or creates an instance of the component associated with the route, and the component view is displayed in the location specified by the RouterOutlet directive.

Code example:

import { Component } from 'angular2/core';
import {ProductListComponent} from './products/product-list.component';
import {ProductService} from './products/product.service';
import {HTTP_PROVIDERS} from 'angular2/http';
import {ROUTER_PROVIDERS, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import 'rxjs/Rx'; //Load all features
import {WelcomeComponent} from './home/welcome.component'
@Component({
    selector: 'pm-app',
    template:`
    <div>
        <nav class='navbar navbar-default'>
            <div class='container-fluid'>
                <a class='navbar-brand'>{{pageTitle}}</a>
                <ul class='nav navbar-nav'>
                    <li><a [routerLink]="['Welcome']">Home</a></li>
                    <li><a [routerLink]="['Products']">Product List</a></li>
                </ul>
            </div>
        </nav>
        <div class='container'>
            <router-outlet></router-outlet>
        </div>
    </div>`,
    directives: [ROUTER_DIRECTIVES],
    providers: [ProductService, HTTP_PROVIDERS, ROUTER_PROVIDERS]
})
@RouteConfig([
    {path: '/welcome', name: 'Welcome', component: WelcomeComponent, useAsDefault: true },
    {path: '/products', name: 'Products', component: ProductListComponent}
])
export class AppComponent {
    pageTitle: string = "Acme Product Management";
}

The question arises: I can see part of the location, but what does it mean that it creates an instance of the associated component? Is it just {}, and if so, what will be displayed in the associated RouterOutlet directive?

Answer 1

You have a RouteConfig annotation consisting of two configuration objects:

{path: '/welcome', name: 'Welcome', component: WelcomeComponent, useAsDefault: true },
{path: '/products', name: 'Products', component: ProductListComponent}

/welcome WelcomeComponent, .

/welcome location, angular, - WelcomeComponent , <router-outlet></router-outlet> html.

Component in html ​​ .