jhipster angular 2 lazyload権限&国際化全体総括

10759 ワード

詳細
まず、Webパッケージの怠け者ロードloaderを変更します.
\webpack\webpack.common.js
修正内容は次のとおりです.

 module: {
            rules: [
                { test: /bootstrap\/dist\/js\/umd\//, loader: 'imports-loader?jQuery=jquery' },
                {
                    test: /\.ts$/,
                    loaders: [
                        'angular2-template-loader',
                        'awesome-typescript-loader',
                        'angular-router-loader'(  ）
                    ],
                    exclude: ['node_modules/generator-jhipster']
                },

構成しないと、次のようなエラーが発生します.
Uncaught (in promise): Error: Cannot find module '/xxx/xxx.module'
ルーティング・ファイルを作成するには、次の手順に従います.
\src\main\webapp\app\lazy.route.ts
loadChildrenを使用したリロード:

import { Route } from '@angular/router';

import { NavbarComponent } from './layouts';

export const adminRoute: Route = {
    path: 'admin',
    loadChildren:'./admin/admin.module'       #        #        ，         default   
};

export const entityRoute: Route = {
    path: 'entity',
    loadChildren:'./entities/entity.module'
};
export const accountModule: Route = {
    path: 'account',
    loadChildren:'./account/account.module'
};
export const homeRoute: Route = {
    path: 'home',
    loadChildren:'./home/home.module'
};

上記の例を示します.

import { Route } from '@angular/router';

import { NavbarComponent } from './layouts';

export const adminRoute: Route = {
    path: 'admin',
    loadChildren:'./admin/admin.module'
};

export const entityRoute: Route = {
    path: 'entity',
    loadChildren:'./entities/entity.module'
};
export const accountModule: Route = {
    path: 'account',
    loadChildren:'./account/account.module#TestGateAccountModule'
};
export const homeRoute: Route = {
    path: 'home',
    loadChildren:'./home/home.module'
};

対応するモジュールライフの変化:
src\main\webapp\app\account\account.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterModule } from '@angular/router';

import { TestGateSharedModule } from '../shared';

import {
    Register,
    Activate,
    Password,
    PasswordResetInit,
    PasswordResetFinish,
    PasswordStrengthBarComponent,
    RegisterComponent,
    ActivateComponent,
    PasswordComponent,
    PasswordResetInitComponent,
    PasswordResetFinishComponent,
    SettingsComponent,
    accountState
} from './';
import {customHttpProvider} from "../blocks/interceptor/http.provider";

@NgModule({
    imports: [
        TestGateSharedModule,
        RouterModule.forChild(accountState)
    ],
    declarations: [
        ActivateComponent,
        RegisterComponent,
        PasswordComponent,
        PasswordStrengthBarComponent,
        PasswordResetInitComponent,
        PasswordResetFinishComponent,
        SettingsComponent
    ],
    providers: [
        Register,
        Activate,
        Password,
        PasswordResetInit,
        customHttpProvider(),
        PasswordResetFinish
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class TestGateAccountModule {} //      default   ，   ‘#’

しかし、2つの方法で混同すると、このようなエラーが発生します.
ERROR Error: Uncaught (in promise): Error: No NgModule metadata found for 'undefined'.(…)
これで、怠け者のロードは終わります.
前の版は何かを忘れます

      
@NgModule({
    imports: [
        BrowserModule,
        LayoutRoutingModule,
        Ng2Webstorage.forRoot({ prefix: 'jhi', separator: '-'}),
        RouterModule.forRoot(LAZY_ROUTES, { useHash: true }),
        RcdisGateSharedModule,
        RcdisGateHomeModule
        // ,
        // RcdisGateAccountModule
    ],
    ：
RouterModule.forChild(LAZY_ROUTES),

しかし、怠け者のロードに成功し、プログラムページもロードされましたが、データは表示されず、国際化はロードできません.
第一歩は401データアクセス権限エラーを解決する:jwtブロッカーは怠惰にロードされたモジュールをブロックできない
jwtのhttpブロックモジュール:
\src\main\webapp\app\blocks\interceptor
読み取りコード分析により、このモジュールは手動でロードする必要があります.
怠惰なロードを行うモジュール定義ファイルに来ました.
\src\main\webapp\app\admin\admin.module.ts(本例)

import {customHttpProvider} from "../blocks/interceptor/http.provider";
providers: [
        ……
        customHttpProvider(),
        ……
    ],

これでプログラムが動作し、データがロードされます.
次に、国際化ロードの問題を解決します.
次の問題の原因は多くありません.デフォルトで怠け者ではない場合、彼は自分で国際化サービスを呼び出す必要はありません.追い風車に従えばいいのですが、自分で出てきて何をするにも自分でやらなければなりません.
src\main\webapp\app\admin\audits\audits.component.ts(本例)

    constructor(
        ……
        private languageHelper: JhiLanguageHelper,
        private languageService: JhiLanguageService,
        ……
    ) {
……
        this.languageService.setLocations(['all']);
……
    }

国際化の問題についてお話しします.
このような解決はあまりにも些細なようで、各componentに追加しなければなりませんが、モジュール全体がどのcomponentが1回実行されても、2回目の実行は必要ありませんが、各componentに書かなければなりません.

このファイルのすべてのコードは次のとおりです.

import { Component, OnInit } from '@angular/core';
import { DatePipe } from '@angular/common';
import {ParseLinks, JhiLanguageService} from 'ng-jhipster';

import { Audit } from './audit.model';
import { AuditsService } from './audits.service';
import { ITEMS_PER_PAGE } from '../../shared';
import { PaginationConfig } from '../../blocks/config/uib-pagination.config';
import {JhiLanguageHelper} from "../../shared/language/language.helper";

@Component({
  selector: 'jhi-audit',
  templateUrl: './audits.component.html'
})
export class AuditsComponent implements OnInit {
    audits: Audit[];
    fromDate: string;
    itemsPerPage: any;
    links: any;
    page: number;
    orderProp: string;
    reverse: boolean;
    toDate: string;
    totalItems: number;

    constructor(
        private auditsService: AuditsService,
        private parseLinks: ParseLinks,
        private paginationConfig: PaginationConfig,
        private languageHelper: JhiLanguageHelper,
        private languageService: JhiLanguageService,
        private datePipe: DatePipe
    ) {
        this.itemsPerPage = ITEMS_PER_PAGE;
        this.page = 1;
        this.reverse = false;
        this.orderProp = 'timestamp';
        this.languageService.setLocations(['all']);
        this.languageService.addLocation('home');
        this.languageService.changeLanguage("zh-cn");
        this.languageService.init();
        this.languageService.reload();

        alert(JSON.stringify(this.languageService.getCurrent()))
    }

    getAudits() {
        return this.sortAudits(this.audits);
    }

    loadPage(page: number) {
        this.page = page;
        this.onChangeDate();
    }

    ngOnInit() {
        this.today();
        this.previousMonth();
        this.onChangeDate();
        this.languageHelper.getAll().then((languages) => {
            alert(languages);
        });
        this.languageHelper.updateTitle()
    }

    onChangeDate() {
        this.auditsService.query({page: this.page - 1, size: this.itemsPerPage,
            fromDate: this.fromDate, toDate: this.toDate}).subscribe((res) => {

            this.audits = res.json();
            this.links = this.parseLinks.parse(res.headers.get('link'));
            this.totalItems = + res.headers.get('X-Total-Count');
        });
    }

    previousMonth() {
        const dateFormat = 'yyyy-MM-dd';
        let fromDate: Date = new Date();

        if (fromDate.getMonth() === 0) {
            fromDate = new Date(fromDate.getFullYear() - 1, 11, fromDate.getDate());
        } else {
            fromDate = new Date(fromDate.getFullYear(), fromDate.getMonth() - 1, fromDate.getDate());
        }

        this.fromDate = this.datePipe.transform(fromDate, dateFormat);
    }

    today() {
        const dateFormat = 'yyyy-MM-dd';
        // Today + 1 day - needed if the current day must be included
        const today: Date = new Date();
        today.setDate(today.getDate() + 1);
        const date = new Date(today.getFullYear(), today.getMonth(), today.getDate());
        this.toDate = this.datePipe.transform(date, dateFormat);
    }

    private sortAudits(audits: Audit[]) {
        audits = audits.slice(0).sort((a, b) => {
            if (a[this.orderProp] < b[this.orderProp]) {
                return -1;
            } else if ([b[this.orderProp] < a[this.orderProp]]) {
                return 1;
            } else {
                return 0;
            }
        });

        return this.reverse ? audits.reverse() : audits;
    }
}

ソースは簡単に紹介します
今怠け者のロードの国際化の入り口、私はすべてしていないで、ただ2つの地方をしました:それぞれ監査と設置で、その他のモジュールは自動的に国際化して、しかしあなたは直接他のモジュールに入ってはいけません.OK処女作

TestGate.rar (411.8 KB)

ダウンロード回数:1

jquery制御自動リフレッシュのコード例

【jQuery】バインド解除クリックイベントおよび繰返しバインド解決方法