角度2路由器插座负载

时间:2017-04-23 03:29:33

标签: angular angular-ui-router

我有以下html元素mainTemplate.html:

  <div id="content" class="row">
        <router-outlet></router-outlet>
    </div>

app.routing.module:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SearchComponent } from './search.component';
import { BuySellComponent } from './buySell.component';

import { CanDeactivateGuard } from './can-deactivate-guard.service';
import { AuthGuard } from './auth-guard.service';
import { SelectivePreloadingStrategy } from './selective-preloading-strategy';
import { ModuleWithProviders } from '@angular/core';
const appRoutes: Routes = [
    {
        path: 'search',
        component: SearchComponent,

    }
    , {
        path: 'buysell',
        component: BuySellComponent,

    }

    , { path: '', redirectTo: '/buysell', pathMatch: 'full' }
];


//@NgModule({

//    exports: [
//        RouterModule
//    ],
//    providers: [
//        CanDeactivateGuard,
//        SelectivePreloadingStrategy
//    ]
//})
//export class AppRoutingModule { }

export const AppRoutingModule: ModuleWithProviders = RouterModule.forRoot(appRoutes);

以及以下html和typscript代码填写路径

<div id="map" class="map" tabindex="0"></div>

import { Component } from '@angular/core';
declare function testJs(): any;
import { AfterViewInit } from '@angular/core';   
declare function generateMap(): any;
//declare function jQuery(param: string): any;
@Component({
    selector: 'my-app',
    templateUrl: '/mainTemplate.html'
})

export class AppComponent implements AfterViewInit {
    user: string;
    ngAfterViewInit () {
        generateMap();
    }
    ngOnInit() {
        console.log('testing');
    }
    constructor() {
        testJs.prototype.testFunction();
        this.user = "asdf";
        var x = 90;
    }
}

生成map只是使用一个openlayer map来加载一个带有id“map”的html div元素的地图。

但是,在ngAfterViewInit和ngOnInit期间,map元素仍然不存在。

当路由器插座完成加载其html元素时会触发什么事件?

它正在导航到buySell.html,并且在buySell.html中。 buySell.html是默认路由,因此它始终是最初加载的

感谢。

1 个答案:

答案 0 :(得分:1)

而不是在初始化AppComponent时触发 , 0 1 { 2 3 $ 1 2 3 4 5 6 1 2 3 4 5 6 , i. 2 2 2 2 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ,而是应该将其移动到路由到的组件的generateMap方法。