Question

我在angular2中遇到了问题。我的问题是。

例如

我已访问siteconfig.aspx页面，我等待SiteConfig.html模板然后加载此页面，但也加载了其他所有组件模板。我只想加载SiteConfig.html。请查看下面的图片以了解我的问题。

module-app.ts文件内容。

import { NgModule } from '@angular/core'
import { HttpModule } from '@angular/http'
import { FormsModule } from  '@angular/forms'
import { BrowserModule } from '@angular/platform-browser'

import { AceEditorModule } from 'ng2-ace-editor'
import {
    DataTableModule,
    ButtonModule,
    SharedModule,
    DialogModule,
    InputTextModule,
    TabViewModule,
    PanelModule,
    CheckboxModule,
    DropdownModule,
    FieldsetModule,
    MessagesModule
} from 'primeng/primeng'

/* My Components */
import { ComponentShared } from './pages/shared'
import { ComponentErrorLog } from './pages/settings/component-errorlog'
import { ComponentSiteConfig } from './pages/settings/component-site-config'
import { ComponentSocialMediaShareAccount } from './pages/content/social-media-share/component-account'
import { ComponentSocialMediaShareList } from './pages/content/social-media-share/component-list'
import { ComponentSocialMediaShareEdit } from './pages/content/social-media-share/component-edit'
import { ComponentSiteConfigItem } from './pages/partials/component-site-config-item'
import { ComponentCodeManagement } from "./pages/settings/component-code-management"

import { PipeSiteConfigGroupFilter } from "./pages/settings/component-site-config-group-filter"

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,

        DataTableModule,
        ButtonModule,
        DialogModule,
        TabViewModule,
        InputTextModule,
        PanelModule,
        CheckboxModule,
        DropdownModule,
        FieldsetModule,
        AceEditorModule,
        MessagesModule,

        SharedModule
    ],
    providers: [],
    declarations: [
        /* My Components */
        ComponentShared,
        ComponentSiteConfig,
        ComponentErrorLog,
        ComponentSiteConfigItem,
        ComponentCodeManagement,
        ComponentSocialMediaShareAccount,
        ComponentSocialMediaShareList,
        ComponentSocialMediaShareEdit,
        /* My Pipes */
        PipeSiteConfigGroupFilter
    ],
    bootstrap: [ComponentShared]
})
export class AppModule {

}

示例component-site.config.ts文件内容。

import { Component, OnInit } from '@angular/core'
import { Http } from '@angular/http'
declare var module: any;
@Component({
    selector: 'site-config',
    moduleId: module.id,
    templateUrl: '/Settings/SiteConfig.html?v=' + Date.now().toString()
})
export class ComponentSiteConfig implements OnInit {
    items: [Model.DtoSiteConfig[]]
    categories: ICategory[]
    private parseList(items: Model.DtoSiteConfig[]): void {
        items.forEach((val, i, arry) => {
            if (!this.items[val.panelType])
                this.items[val.panelType] = [];
            this.items[val.panelType].push(val);
        })
    }
    ngOnInit(): void {
        this.items = [[]]
        this.categories = [
            { id: 1, name: "Genel Seo", icon: "fa-globe" },
            { id: 2, name: "Kategori", icon: "fa-folder-open-o" },
            {
                id: 3, name: "Mail", icon: "fa-envelope-o",
                groups: [
                    {
                        id: 30,
                        name: 'Genel Mail Ayarları'
                    },
                    {
                        id: 31,
                        name: 'Smtp Ayarları'
                    },
                    {
                        id: 32,
                        name: 'Sendloop Ayarları'
                    },
                    {
                        id: 33,
                        name: 'Mailchimp Ayarları'
                    },
                ]
            },
            {
                id: 4, name: "Sosyal Medya", icon: 'fa-share-alt-square',
                groups: [
                    {
                        id: 41,
                        name: 'Twitter Ayarları'
                    }
                ]
            },
            { id: 5, name: "Api", icon: 'fa-code' },
            { id: 6, name: "Site Haritası", icon: 'fa-link' },
            { id: 99, name: "Diğer", icon: 'fa-question-circle' }
        ]
        SiteConfigApi.Api.list(res => {
            if (res.success) {
                this.parseList(res.model)
            }
        })
    }
    constructor(private http: Http) {
    }
    public getGroups(cat: ICategory, group: IGroup) {
        return this.items[cat.id].filter(item => item.groupName === group.id.toString());
    }
}
export interface ICategory {
    id: number
    name: string
    icon: string
    groups?: IGroup[]
}
interface IGroup {
    id: number
    name: string
}

示例SiteConfig.html文件内容。

<p-panel>
    <p-header>
        <div class="ui-helper-clearfix">
            <span class="ui-panel-title" style="font-size:16px; display:inline-block; margin-top:2px">Site Ayarları</span>
        </div>
    </p-header>
    <form #form="ngForm">
        <p-tabView>
            <template ngFor let-cat [ngForOf]="categories" let-i="index">
                <p-tabPanel [header]="cat.name" [leftIcon]="cat.icon">
                    <template ngFor let-group [ngForOf]="cat.groups" let-i="index">
                        <p-panel [header]="group.name" *ngIf="cat.groups.length > 0" [styleClass]="'row'" [style]="{'margin-bottom': '20px'}">
                            <div *ngFor="let item of items[cat.id] | groupFilter:group.id" class="col-sm-4">
                                <site-config-item [item]="item" *ngIf="item"></site-config-item>
                            </div>
                        </p-panel>
                    </template>
                    <div class="row">
                        <template ngFor let-item [ngForOf]="items[cat.id]">
                            <div class="col-sm-4" *ngIf="!item.groupName">
                                <site-config-item [item]="item"></site-config-item>
                            </div>
                        </template>
                    </div>
                </p-tabPanel>
            </template>
        </p-tabView>
    </form>
</p-panel>

此图片说明我的问题。

我如何解决问题？

Angular2 - 为什么要加载所有组件模板？

0 个答案: