Добрый день всем! Не хочет у меня работать child-routing во 2-ом Angular-е, а если точнее, то когда в
app.component говорю о том, что есть у меня child(/...), то потомок не подгружается, но и ошибок никаких нету.Если в потомке(adminPanelRoot.component ) добавлю к роутингу
@RouteConfig([
{path: "/tables", component: Tables, name: "Tables",<b>useAsDefault:true</b>}
])
, то сразу все рендерится до вьюшки потомка. Хотелось бы, чтобы сначала подгрузился
adminPanelRoot.component, а потом при переходе по ссылке подтягивался и потомок. Прошу помочь разобраться:
boot.tsimport {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from "angular2/router";
import {HTTP_PROVIDERS} from "angular2/http";
import {AppComponent} from "./app.component";
bootstrap(AppComponent,[ROUTER_PROVIDERS,HTTP_PROVIDERS]);
app.component.tsimport {Component} from "angular2/core";
import {ROUTER_DIRECTIVES} from "angular2/router";
import {RouteConfig} from "angular2/router";
import {AdminPanelRoot} from "./administrationPanel/adminPanelRoot.component";
@Component({
selector: 'root-app',
template: `<router-outlet> </router-outlet>`,
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{path: "/administrationPanel/...", name: "AdminPanelRoot", component: AdminPanelRoot}
])
export class AppComponent{
}
adminPanelRoot.component.tsimport {Component} from "angular2/core";
import {ROUTER_DIRECTIVES,RouteConfig, RouterLink, AsyncRoute} from "angular2/router";
import {Tables} from "./tables/tables.component";
@Component({
selector: "admin-root",
template: `
<header>
<span id="logo">ADMIN PANEL</span>
<span id="info_panel">
<span id="panel_top_information">Table</span>
</span>
</header>
<nav id="menu">
<ul>
<li> <a [routerLink]="['./Tables']">Tables</a> </li>
<li>Home</li>
</ul>
</nav>
<router-outlet></router-outlet>
`,
styleUrls: ["css/admin/adminPanelRoot.css"],
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{path: "/tables", component: Tables, name: "Tables"}
])
export class AdminPanelRoot {
/*
new AsyncRoute({path: "/tables", loader: () => Promise.resolve(Tables), name:"Tables"})
*/
}
tables.component.tsimport {Component} from "angular2/core";
@Component({
selector:"table-list",
template:"<div>Hello from list!</div>"
})
export class Tables{
}
p.s Так же хотелось бы понять почему не работает
AsyncRoute, т.е он все равно подтягивает все те же фаилы, даже когда я не перехожу, по ссылке, т.е не активирую представление.
p.p.s Хотелось бы узнать, возможно ли ужать все это дело до адекватных размеров,а то сразу 2.5 мегабайта подтягиваются? Я слышал для этих целей можно Gulp-ом воспользоваться, он действительно сильно все ужмет, либо тут другой подход нужен?:
<!DOCTYPE html>
<html>
<head>
<base href="/">
<title>Administration Panel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.js"></script>
<link rel="stylesheet" href="css/admin/appRoot.css">
<script>
System.config({
packages: {
views: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('views/adminViews/boot.js')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<root-app>Loading...</root-app>
</body>
</html>
Средний