Why does the router inject the component after the <router-outlet> element
instead of into the the <router-outlet> element?
<router-outlet>Portcullis Component Router Outlet</router-outlet>
<vx-cat-component>Cat</vx-cat-component>
My expectation was that the text that I placed inside of the
<router-outlet> (shown above) would be replaced by the <vx-cat-component>
element...
My expectation is based upon the pattern where the content of the
application component element is replaced by the application component
template
e.g.the image and text in the following index.html snippet...
<body>
<vx-application-component><img src="spinner.gif" width="16"/> Loading
Application...</vx-application-component>
</body>
...are replaced as follows (after bootstrap() completes):
<body>
<vx-application-component>
<router-outlet>Application Component Router Outlet</router-outlet>
<vx-five-panel-component>
<vx-pediment-component>
<header class="casement" id="pediment">
<p>Pediment</p>
</header>
</vx-pediment-component>
<vx-pintle-component>
<nav class="panel casement" id="pintle">
<p>Pintle</p>
</nav>
</vx-pintle-component>
<vx-portcullis-component>
<section class="panel gateway" id="portcullis">
<p>Portcullis</p>
<br>
<a ng-reflect-router-link="./cat" ng-reflect-href="/0/cat"
href="/0/cat">Cat</a>
<a ng-reflect-router-link="./dog" ng-reflect-href="/0/dog"
href="/0/dog">Dog</a>
<a ng-reflect-router-link="./snake"
ng-reflect-href="/0/snake" href="/0/snake">Snake</a>
<a ng-reflect-router-link="./bird"
ng-reflect-href="/0/bird" href="/0/bird">Bird</a>
<a ng-reflect-router-link="./fish"
ng-reflect-href="/0/fish" href="/0/fish">Fish</a>
<a ng-reflect-router-link="./volvox"
ng-reflect-href="/0/volvox" href="/0/volvox">Volvox</a>
<br>
<router-outlet>Portcullis Component Router
Outlet</router-outlet>
<vx-cat-component>Cat</vx-cat-component>
</section>
</vx-portcullis-component>
<vx-pilaster-component>
<aside class="panel casement" id="pilaster">
<p>Pilaster</p>
</aside>
</vx-pilaster-component>
<vx-plinth-component>
<footer class="casement" id="plinth">
<p>Plinth</p>
</footer>
</vx-plinth-component>
</vx-five-panel-component>
</vx-application-component>
</body>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
