Question

我花了很多时间在这上面，并且即将挥舞白旗。

我的应用程序在从index.html运行时工作正常，我懒得加载一个功能，该功能使用绑定来应用样式进行测试。

但是，如果我直接进入网址，我会遇到异常

＆＃34;调用节点模块失败，错误：错误：未捕获（在承诺中）： TypeError：无法设置属性＆＃39; padding＆＃39;未定义＆＃34;。

使事情变得更难的是高亮度指令工作正常，它只是我的不绑定的标签指令。如果我从我的html中删除label属性，页面加载正常。我真的很难找到造成这个问题的问题。

app模块

import { NgModule } from '@angular/core';
import { UniversalModule } from 'angular2-universal';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './components/app/app.component'
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { HeroDetailComponent } from './components/hero/hero-detail.component';
import { HeroListComponent } from './components/hero/hero-list.component';
import { HeroService } from './components/hero/hero.service';
import { HeroDashboardComponent } from './components/hero/hero-dashboard.component';
import { HeroMainComponent } from './components/hero/hero-main.component';
import { HeroFormComponent } from './components/form/hero-form.component';

import { ReactiveFormModule } from './components/form-reactive/form-reactive.module';

import { CoreModule } from './components/core/core.module';

import { AppRoutingModule } from './app.routes'

@NgModule({
    bootstrap: [AppComponent],
    imports: [
        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
        HttpModule,
        FormsModule,
        AppRoutingModule,
        ReactiveFormsModule,
        CoreModule,
        ReactiveFormModule
    ],
    declarations: [
        AppComponent,
        NavMenuComponent,
        CounterComponent,
        FetchDataComponent,
        HomeComponent, 
        HeroDetailComponent,
        HeroListComponent,
        HeroDashboardComponent,
        HeroMainComponent,
        HeroFormComponent
    ],
    providers: [HeroService]
})

export class AppModule {}

app.routes.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { HeroDetailComponent } from './components/hero/hero-detail.component';
import { HeroListComponent } from './components/hero/hero-list.component';
import { HeroDashboardComponent } from './components/hero/hero-dashboard.component';
import { HeroMainComponent } from './components/hero/hero-main.component';
import { HeroFormComponent } from './components/form/hero-form.component';    

export const routes: Routes = [
    { path: '', redirectTo: 'hero/dashboard', pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    { path: 'counter', component: CounterComponent },
    { path: 'fetch-data', component: FetchDataComponent },
    {
        path: 'hero', component: HeroMainComponent, children:
        [
            { path: '', component: HeroListComponent }, // url: hero/
            { path: 'dashboard', component: HeroDashboardComponent },
            { path: 'detail/:id', component: HeroDetailComponent },
        ]
    },
    { path: 'form', component: HeroFormComponent },
    { path: 'form-reactive', loadChildren: () => { return Promise.resolve(require('./components/form-reactive/form-reactive.module')['ReactiveFormModule']) }},
    { path: 'core-tracking', loadChildren: () => { return Promise.resolve(require('./components/core/core.module')['CoreModule']); } },
    { path: '**', redirectTo: 'home' }
]

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

芯routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CoreTrackingMainComponent } from './coreTrackingMain.component';

@NgModule({
    imports: [RouterModule.forChild([
        { path: '', component: CoreTrackingMainComponent }
    ])],
    exports: [RouterModule]
})
export class ContactRoutingModule { }

core.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { ContactRoutingModule } from './core-routing.module';

import { CoreTrackingMainComponent } from './coreTrackingMain.component';
import { CoreTrackingCriteriaComponent } from './coreTrackingCriteria.component';
import { CriteriaLabelDirective } from './coreCriteriaLabel.directive';
import { HighlightDirective } from './coreCriteriaHighlight.directive';


@NgModule({
    imports: [CommonModule, ReactiveFormsModule, ContactRoutingModule],
    declarations: [
        CoreTrackingMainComponent,
        CoreTrackingCriteriaComponent,
        CriteriaLabelDirective,
        HighlightDirective,
    ],
    exports: [
        CoreTrackingMainComponent,
        CoreTrackingCriteriaComponent
    ]
})
export class CoreModule { }

coreCriteriaLabel.directive.ts

    import { Directive, ElementRef } from '@angular/core';

    @Directive({ selector: '[myLabel]' })

    export class CriteriaLabelDirective {
        constructor(el: ElementRef) {
            el.nativeElement.style.padding = '6px 0';
}
        }

coreCriteriaHighlight.directive.ts

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({ selector: '[myHighlight]' })

export class HighlightDirective {
    @Input('myHighlight') highlightColor: string;
    constructor(private el: ElementRef) { }
    @HostListener('mouseenter') onMouseEnter() {
        this.highlight(this.highlightColor || 'red');
    }
    @HostListener('mouseleave') onMouseLeave() {
        this.highlight(null);
    }
    private highlight(color: string) {
        this.el.nativeElement.style.backgroundColor = color;
    }
}

coreTrackingCriteria.component.html

<h2>Core Tracking Criteria</h2>
<div class="criteria-container col-xs-12">
    <form [formGroup]="trackingForm" novalidate>
        <div class="form-group">
            <div class="col-md-6">
                <label [myHighlight]="color" class="control-label col-xs-4">Reader Organization</label>
                <div class="col-xs-8">
                    <input class="form-control" formControlName="readerOrg">
                </div>
            </div>
            <div class="col-md-6">
                <label [myLabel] class="control-label col-xs-4">Location</label>
                <div class="col-xs-8">
                    <input class="form-control" formControlName="location">
                </div>
            </div>
        </div>
    </form>
</div>

coreTrackingCriteria.component.ts

import { Component } from '@angular/core';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
    selector: 'core-criteria',
    templateUrl: './coreTrackingCriteria.component.html',
    styleUrls: ['./coreTrackingCriteria.component.css']
})
export class CoreTrackingCriteriaComponent {

    constructor(private fb: FormBuilder) {
        this.createForm();
    }

    color: string = 'blue';

    trackingForm: FormGroup;

    createForm() {
        this.trackingForm = this.fb.group({
            readerOrg: ['', Validators.required],
            location: ['', Validators.required],
        });
    }

}

更新

实现ngOnInit（）而不是使用指令中的构造函数。仍然会导致同样的问题

coreCriteriaLabel.directive.ts

import { Directive, ElementRef, Input, OnInit } from '@angular/core';

@Directive({ selector: '[myLabel]' })

export class CriteriaLabelDirective implements OnInit {

    constructor(private el: ElementRef) {
    }

    ngOnInit() {
        this.el.nativeElement.style.padding = '6px 0';
    }
}

Answer 1

好的，我终于得到了我的指示。

我使用的是Renderer类，而不是直接附加到元素nativeElement。

我还需要包含@Input 应用程序的装饰器正确编译。

对此行为的原因的任何解释将不胜感激。

import { Directive, Renderer, ElementRef, Input,  } from '@angular/core';
@Directive({ selector: '[myLabel]' })

export class CriteriaLabelDirective  {
    @Input('myLabel') myLabel;
    constructor(private renderer: Renderer, private el: ElementRef) {
            this.renderer.setElementStyle(this.el.nativeElement, 'padding', '6px 0');
    }
}

Angular2 - asp.core - 在路由到特定URL

1 个答案: