标签: angular2-directives

我写了一个非常简单的小Angular2应用程序,我已经构建它来生成练习表.但是,当我部署应用程序时,ngIf似乎不起作用(我的ISP默认网络服务器或我自己的Heroku /本地部署的节点-http-server).当我在我的开发节点服务器上运行完全相同的代码库时(npm start)ngIf按预期工作.

如果有人对如何调试这个有一些指导我会非常感激,或者如果我只是做错了...

这是相关的代码

SRC/template.html

Click on the top left word <span *ngIf="word">({{word}})</span><span *ngIf="!word">(&lt;click&gt;)</span>

app.ts

import {bootstrap} from 'angular2/platform/browser'
import {enableProdMode, Component} from 'angular2/core'
enableProdMode()

@Component({
  selector: 'app',
  templateUrl: 'src/template.html'
})
export class AppComponent {
  public word = '';
}

bootstrap(AppComponent)

当应用程序在本地启动时,我会看到"单击左上角的单词(<click>)"(如此plunker链接中所示),但是当我部署应用程序时,我只看到"单击左上角的单词".我以前在部署中发现了与ngFor类似的问题.但是我确实在dev和deploy中看到了以下代码

<!--template bindings={}-->
<!--template bindings={}-->

所以模板正在被处理,至少在某种程度上.我最好的猜测是说一定是想错了,当我生成bundle.js 或dependencies.js文件小号通过一饮而尽.我通过Chrome开发者控制台在开发或部署网站上看不到任何Javascript错误.

以下是我的gulpfile中的一些相关任务.

gulp.task('webpack', ['clean'], function() {
  return gulp.src('src/app/app.ts')
    .pipe(webpack(require('./webpack.config.js')))
    .pipe(gulp.dest('src/'));
});

gulp.task('dependencies', function() {
  return gulp.src(['node_modules/reflect-metadata/Reflect.js', 
                   'node_modules/zone.js/dist/zone.js'])
    .pipe(concat('dependencies.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/')); …

我在浏览器日志中遇到以下异常:

警报上未找到指令注释

堆栈跟踪:

Error: No Directive annotation found on Alert
at new BaseException (webpack:///./~/angular2/src/facade/exceptions.js?:15:23)
at DirectiveResolver.resolve (webpack:///./~/angular2/src/core/linker/directive_resolver.js?:41:15)
at RuntimeMetadataResolver.getDirectiveMetadata (webpack:///./~/angular2/src/compiler/runtime_metadata.js?:41:51)
at eval (webpack:///./~/angular2/src/compiler/runtime_metadata.js?:98:62)
at Array.map (native)
at Array.map (webpack:///./~/es6-shim/es6-shim.js?:1113:14)
at RuntimeMetadataResolver.getViewDirectivesMetadata (webpack:///./~/angular2/src/compiler/runtime_metadata.js?:98:27)
at TemplateCompiler._compileNestedComponentRuntime (webpack:///./~/angular2/src/compiler/template_compiler.js?:151:65)
at eval (webpack:///./~/angular2/src/compiler/template_compiler.js?:136:87)
at Array.forEach (native)
at Array.forEach (webpack:///./~/es6-shim/es6-shim.js?:1107:14)
at eval (webpack:///./~/angular2/src/compiler/template_compiler.js?:136:43)
at Zone.run (webpack:///./~/zone.js/dist/zone-microtask.js?:1216:24)
at Zone.eval [as run] (webpack:///./~/angular2/src/core/zone/ng_zone.js?:344:42)
at zoneBoundFn (webpack:///./~/zone.js/dist/zone-microtask.js?:1193:26)
at lib$es6$promise$$internal$$tryCatch (webpack:///./~/zone.js/dist/zone-microtask.js?:441:17)
at lib$es6$promise$$internal$$invokeCallback (webpack:///./~/zone.js/dist/zone-microtask.js?:453:18)
at lib$es6$promise$$internal$$publish (webpack:///./~/zone.js/dist/zone-microtask.js?:424:12)
at eval (webpack:///./~/zone.js/dist/zone-microtask.js?:96:10)
at microtask (webpack:///./~/angular2/src/core/zone/ng_zone.js?:384:29)
at Zone.run (webpack:///./~/zone.js/dist/zone-microtask.js?:1216:24)
at Zone.eval [as run] …

我面临着Angular2路由器和异步管道的问题.

我试图渲染一个RxJs Observable,数据不会自动渲染.

必须单击链接以获取要呈现的数据的路径.

这是根应用程序:

import {bootstrap}    from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {AppComponent} from './app.component.ts';

bootstrap(AppComponent, [HTTP_PROVIDERS, ROUTER_PROVIDERS]);

这是根组件:

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {FirstComponent} from './app.first-component.ts';
import {SecondComponent} from './app.second-component.ts';
import {AppService} from "./app.services.ts";


@Component({
    selector: 'my-app',
    providers: [AppService, FirstComponent, SecondComponent],
    directives: [FirstComponent, SecondComponent, ROUTER_DIRECTIVES],
    template: `<h1>An Angular 2 App</h1>
               <a [routerLink]="['First']">first-default</a> 
               <a [routerLink]="['Second']">second</a> 
               <router-outlet></router-outlet>`
})
@RouteConfig([
    {path: '/', name: 'First', component: FirstComponent, useAsDefault: true},
    {path: '/second', name: …

我正在尝试使用angular 2和javascript创建一个应用程序.我想要日期输入,我已经读过所有浏览器都不支持html 5输入类型"日期".我搜索了角度2的日期选择器,我找到了很多日期选择器,但有打字稿支持,如( 有谁知道一个简单的日期选择器在角度2应用程序中使用？).我的问题是,如果有角度2支持JavaScript的任何datepicker或如果有一种方法导入javascript内的typescipt datepickers？

当我ngClass像这样使用指令时:

[ngClass]="{has-error: !myInput.valid}"

我收到以下错误:

未处理的Promise拒绝:模板解析错误:解析器错误:缺少预期:在...... {{has-error:!myInput.valid}]中的第5列... ...

我该如何解决这个错误？

我刚刚启动Angular2并在向表单添加(ngSubmit)属性时面临以下错误

Template parse errors:
There is no directive with "exportAs" set to "ngForm" ("


    <form [ERROR ->]#form="ngForm" (ngSubmit)="onSubmit()" novalidate>

以下是我在package.json中的一些依赖项.

"dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "angular2-in-memory-web-api": "0.0.20",
    "core-js": "^2.4.1",
    "ie-shim": "^0.1.0",
    "jquery": "^3.1.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.23"
  }

我跟随html表格.

<form #form="ngForm" (ngSubmit)="onSubmit()" novalidate>

    <div class="form-group">
        <label>Title</label>
        <input [(ngModel)]="model.Title" #title="ngModel" name="title" id="title" type="text" class="form-control" value="">
    </div>

    <div class="form-group">
        <label>Description</label>
        <textarea …

我是新手。我想创建一个自定义验证来检查文件大小和扩展名。我正在使用FormBuilder进行验证，并使用FileReader API来获取输入元素字段数据的文件名和大小。

问题：我们能够在变更事件上触发自定义验证，但无法获取输入类型字段的值。

请提出建议，我们如何实现角度2中文件扩展名和大小的自定义验证。

HTML：

<input type="file" [formControl] = "formName.controls['thumbnailImg']" (change)="changeThumbFile($event)">

零件：

//custom validation
function validateExt(c: FormControl) {
    let extension = ['png', 'jpeg', 'gif'];
    return extension.indexOf(c.value)? null : { validateExt: { valid: false } }
}

this.form = this.formBuilder.group({
  'thumbnailImg': ['', validateExt],
});
changeThumbFile($event){
    var file: File = $event.target.files[0];
    var fReader: FileReader = new FileReader();

    var imgName = file.name;
    this.thumbnailName = imgName;

    this.formGp.controls['thumbnailImg'].updateValueAndValidity();
}

我已经创建了一个类似于角度文档中的hightlight指令但是,我无法在appmodule中导入的其他模块中使用它.以下是我的appmodule.ts文件:

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

import { AppComponent } from './app.component';
import { PrimaryNavigationComponent } from './components/primary-navigation/primary-navigation.component';

import { DashboardModule } from 'app/features/dashboard/dashboard.module';
import { ServicesModule } from 'app/features/services/services.module';
import { NotificationsModule } from 'app/features/notifications/notifications.module';
import { AboutModule } from 'app/features/about/about.module';
import { RedirectModule } from 'app/features/redirect/redirect.module';
import { HighlightDirective } from 'app/directives/highlight/highlight.directive';

@NgModule({ …

我正在创建可重用的表组件，该组件将允许编辑对象字段以准备将其发送到API。

有一个对象：

person: {
  name: "John"
  job: {
    type: "IT"
    title: "Software Engineer"
  }
}

我想将对象嵌套字段传递给组件并进行编辑。铁

<edit-field [field]="person.job.title"></edit-field>

这将产生一个输入字段，该输入字段将完全编辑原始对象中的标题字段。问题在于person.job.title是一个字符串，而不是对象或数组，因此不会通过引用传递。

我有2个想法可以解决该问题：1）将“ person.job.title”作为字符串传递：

<edit-field [field]="'person.job.title'"></edit-field>

要么

<edit-field field="person.job.title"></edit-field>

并在组件类中用“。”分隔：

let fields = this.field.split('.');

然后执行while循环以通过引用访问该字段。

我们还可以做2个输入：

<edit-field-component [fieldRef]="person.job" [field]="'title'"></edit-field-component>

然后在组件内部做 this.fieldRef[this.field]

我想知道是否还有其他更干净的方法可以实现这一目标。

我为我的垂直导航创建了一个侧边菜单,所以我在点击时切换侧边菜单.我需要在菜单外的任何地方点击该菜单.我试过安装:

https://github.com/chliebel/angular2-click-outside

但是由于某种原因它不起作用,我跑npm install,添加

(clickOutside)="close()"

到我的组件或侧面菜单包装器,没有任何反应.

有什么帮助吗？指令代码:

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

@Directive({
    selector: '[clickOutside]'
})
export class ClickOutsideDirective {
    constructor(private _elementRef: ElementRef) {
    }

    @Output()
    public clickOutside = new EventEmitter<MouseEvent>();

    @HostListener('document:click', ['$event', '$event.target'])
    public onClick(event: MouseEvent, targetElement: HTMLElement): void {
        if (!targetElement) {
            return;
        }

        const clickedInside = this._elementRef.nativeElement.contains(targetElement);
        if (!clickedInside) {
            this.clickOutside.emit(event);
        }
    }
}