组件中的组件未在第一次加载

时间：2016-08-05 12:51:57

标签： angular angular2-routing angular2-directives

当我在angular2应用程序上转到不同的页面时，as-my-map组件第一次不显示。再次单击routerlink时，它会显示出来。有谁知道问题是什么？

这是我的代码： index.html（只是正文中的部分）

<as-main-app>
  <i class="center-fix main-spinner fa fa-spin fa-spinner"></i>
</as-main-app>

main.ts 

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';

import { APP_PROVIDERS } from './app.providers';
import { AppComponent } from './app.component';
import { provide } from "@angular/core";
import { LocationStrategy, HashLocationStrategy } from "@angular/common"
import {HTTP_PROVIDERS} from '@angular/http';

declare var ENV: string;

if (ENV === 'production') {
    enableProdMode();
}

bootstrap(AppComponent, [
    HTTP_PROVIDERS,
    APP_PROVIDERS
]);

app.routes.ts：

import { provideRouter, RouterConfig } from '@angular/router';
import { AppComponent } from './app.component'
import { InstellingenRoutes } from './instellingen/index';
import { KaartRoutes } from './kaart/index';
import { LijstRoutes } from './lijst/index';
import { LogsRoutes } from './logs/index';
import { StatistiekenRoutes } from './statistieken/index';

const routes: RouterConfig = [
    {path: '', component: AppComponent},
    ...InstellingenRoutes,
    ...KaartRoutes,
    ...LijstRoutes,
    ...LogsRoutes,
    ...StatistiekenRoutes
];

export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)
];

app.component.ts：

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
    selector: 'as-main-app',
    templateUrl: 'app/app.html',
    directives: [ROUTER_DIRECTIVES]
})
export class AppComponent {
}

app.html：

<nav>
    <ul class="nav">
        <a [routerLink]="['/lijst']" [routerLinkActive]="['active']">
            <li><i class="fa fa-list" aria-hidden="true"></i>
                <div class="text">Lijst</div>
            </li>
        </a>
        <a [routerLink]="['/kaart']" [routerLinkActive]="['active']">
            <li><i class="fa fa-map" aria-hidden="true"></i>
                <div class="text">Kaart</div>
            </li>
        </a>
        <a [routerLink]="['/logs']" [routerLinkActive]="['active']">
            <li><i class="fa fa-book" aria-hidden="true"></i>
                <div class="text">Logs</div>
            </li>
        </a>
        <a [routerLink]="['/instellingen']" [routerLinkActive]="['active']">
            <li><i class="fa fa-wrench" aria-hidden="true"></i>
                <div class="text">Instellingen</div>
            </li>
        </a>
        <a [routerLink]="['/statistieken']" [routerLinkActive]="['active']">
            <li><i class="fa fa-area-chart" aria-hidden="true"></i>
                <div class="text">Statistieken</div>
            </li>
        </a>
    </ul>
</nav>
<router-outlet></router-outlet>

lijst.component.ts：

import { bootstrap } from '@angular/platform-browser-dynamic';
import { Component, OnInit } from '@angular/core';
import { DataService } from './../services/data.service';
import { Data } from './../objects/data.object';
import { MapsComponent } from './../helpers/maps.component';
import { Marker } from './../objects/marker.object';
import { MarkerService } from './../services/marker.service';
import { BatteryComponent } from './../helpers/battery.component';
import { SignalComponent } from './../helpers/signal.component';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
    selector: 'Lijst',
    directives: [MapsComponent, BatteryComponent, SignalComponent],
    providers: [DataService, MarkerService],
    templateUrl: 'app/lijst/lijst.html',
})

export class LijstComponent {
    constructor(private dataService: DataService, private markerService: MarkerService) { }

    ngOnInit() {
        this.getData();
        console.log("Data recieved!");
        console.log(this.datageg);
        this.initMarkers(this.datageg);
        console.log("Markers recieved!");
        console.log(this.markers);
        this.getPositieMarkers(this.datageg);
        console.log("Positie recieved!");
        console.log(this.plaatsMarkers);
    }
    datageg: Data[];
    getData() {
        this.datageg = this.dataService.getData();
    }
    markers: Marker[];
    initMarkers(geg: Data[]) {
        this.markers = this.markerService.getMarkers(geg);
    }

    plaatsMarkers: string;
    getPositieMarkers(geg:Data[]) {
        this.plaatsMarkers = this.markerService.getStringForListPage(geg);
    }

    huidigeMarker: Marker;
    result: string;
    ngAfterViewInit() {

        console.log("waiting");

        console.log('loading..');
        console.log(this.markers);
        console.log(this.plaatsMarkers);
        let node = document.createElement('script');
        node.innerText = "var map = new google.maps.Map(document.getElementById('map'), {center: { lat:51.1339866, lng:4.4439794},zoom: 16, disableDefaultUI: true});" + this.plaatsMarkers;
        node.type = 'text/javascript';
        document.getElementsByTagName('head')[0].appendChild(node);
    }


    previousId: string;
    goToBin(event) {
        var focusOnMarker = document.createElement("script");
        console.log("Clicked on a row! ", event);
        console.log(event.target.className);
        var name = event.target.className;
        if (name.indexOf("fa") != -1) {
            name = event.target.parentElement.parentElement.parentElement;
            console.log("Class was with fa, so what is 3th parent: ", name);
            name = event.target.parentElement.parentElement.parentElement.className;
        } else if (name.indexOf("List") != -1) {
            name = event.target.parentElement.className;
        }
        focusOnMarker.innerText = "map.setCenter(" + name + ".getPosition());";
        document.getElementsByTagName('head')[0].appendChild(focusOnMarker);
        focusOnMarker.remove();
        if (this.previousId) {
            document.getElementById(this.previousId).classList.remove("activeRow");
        }
        this.previousId = name;
        document.getElementById(name).classList.add("activeRow");
    }
}

和lijst.html：

<div class="main-container">
        <h1>Welkom op de lijst pagina!</h1>
        <as-my-map></as-my-map>
        <table id="lijstTable">
            <thead>
            <tr>
                <th>Vuilnisbak <i class="fa fa-sort" aria-hidden="true"></i></th>
                <th>Vultegraad <i class="fa fa-sort" aria-hidden="true"></i></th>
                <th>Laatste contact <i class="fa fa-sort" aria-hidden="true"></i></th>
                <th>Laatst geledigd <i class="fa fa-sort" aria-hidden="true"></i></th>
                <th>Locatie <i class="fa fa-sort" aria-hidden="true"></i></th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of datageg" (click)="goToBin($event)" id={{data.name}}>
                <td class={{data.name}}><i class="fa fa-chevron-right iconArrow" aria-hidden="true"></i>
                    <div class="nameList">{{data.name}}</div>
                    <div class="iconsList">
                        <as-my-battery [level]='data.battery'></as-my-battery>
                        <as-my-signal [level]='data.signal'></as-my-signal>
                        <div style="display:inline;"><i class="fa fa-exclamation-triangle" aria-hidden="true" *ngIf='data.alert'></i></div>
                    </div>
                </td>
                <td class={{data.name}}>{{data.fill}}</td>
                <td class={{data.name}}>{{data.latestContact}}</td>
                <td class={{data.name}}>{{data.lastEmptied}}</td>
                <td class={{data.name}}>{{data.location.name}}</td>
            </tr>
            </tbody>
        </table>
</div>

更新 lijst.routes.ts：

import { RouterConfig } from '@angular/router';

import { LijstComponent } from './lijst.component';

export const LijstRoutes: RouterConfig = [
  { path: '' ,component: LijstComponent }
];

app.routes.ts：

import { provideRouter, RouterConfig } from '@angular/router';

import { AppComponent } from './app.component'
import { InstellingenRoutes } from './instellingen/index';
import { KaartRoutes } from './kaart/index';
import { LijstRoutes } from './lijst/index';
import { LogsRoutes } from './logs/index';
import { StatistiekenRoutes } from './statistieken/index';

const routes: RouterConfig = [
     ...LijstRoutes,
    ...InstellingenRoutes,
    ...KaartRoutes,
    ...LogsRoutes,
    ...StatistiekenRoutes
];

export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)
];

执行此操作后，现在第一页是lijst，但是as-my-map没有加载，只有当我点击一个链接，然后才开始加载，所以我建议它是ngOnInit（）即'因某种原因呼吁...

1 个答案:

答案 0 :(得分：1)

您需要将 LijstComponent 设置为默认组件，就像使用 AppComponent 进行设置一样，

{path: '', component: AppComponent},

const routes: RouterConfig = [
    // {path: '', component: AppComponent},   <---- remove this from here. It is not needed.

    ...InstellingenRoutes,
    ...KaartRoutes,
    ...LijstRoutes,     //<-------in this route setting, put {path: '', component: LijstComponent},
    ...LogsRoutes,
    ...StatistiekenRoutes
];
相关问题
最新问题