Question

我有一个新构建的Angular项目：

ng new "app-name"

我尝试将ngTagsInput用于标记输入框，但每次构建并运行我的应用时，我的浏览器控制台都会出错：

ReferenceError: angular is not defined

看起来它来自ng-tags-input.js。这件事发生了什么？

编辑：我也尝试过使用

npm install ng-tags-input@3.2.0 --save

然后在我的app.module.ts中使用

import { NgTagsInput } from 'ng-tags-input';

这似乎也无效。

的index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example Title</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="assets/materialize.min.css">
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="assets/ng-tags-input.min.css">
  <link rel="stylesheet" href="assets/ng-tags-input.bootstrap.min.css">
</head>
<body>
  <app-root></app-root>
</body>
<script src="assets/jquery.min.js"></script>
<script src="assets/materialize.min.js"></script>
<script src="assets/ng-tags-input.js"></script>
</html>

example.component.html

<div class="container" style="min-height: 70vh; min-width: 70vh; overflow:hidden;">
    <div id="temp" class="row">
      <div class="col s12">
        <h3 style="color:#0081c7">Example Form</h3>
        <hr />
        <form #exampleForm="ngForm" class="col s12" (ngSubmit)="submitForm();" id="example">
          <div class="row">
            <div class="input-field col s8">
              <input name="submissionTitle" type="text" class="validate" [(ngModel)]="model.submissionTitle" required>
              <label for="submissionTitle">Submission Title</label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s4">
            <tags-input ng-model="tags"></tags-input>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

example.component.ts

import { Component, OnInit, ElementRef, Inject } from '@angular/core';
import { Router } from '@angular/router';
import { FormsModule, NgForm } from '@angular/forms';
import { NgModule } from '@angular/core';
import { Element } from '@angular/compiler';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map'

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
 export class ExampleComponent implements OnInit {

  constructor(
    public _http: Http,
    private elementRef: ElementRef,
    private router: Router
  ) { }

  ngOnInit() {
  }
  submitForm() {
    console.log("test");
    const formElement: HTMLFormElement =  this.elementRef.nativeElement.querySelector('#example');
    const formData = new FormData(formElement);
    this._http.post('api/submitExample', this.model).map(
      (res: Response) => res.json()).subscribe(
        (success) => {
          alert("great");
          formElement.reset();
          location.reload();
        },
        (error) => {
         alert("There was an error");
        }
      );
  } 
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ExampleComponent } from './example/example.component';
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { NgTagsInput } from 'ng-tags-input';

const ROUTES = [
  {
    path: '',
    redirectTo: 'example',
   pathMatch: 'full'
  },
  {
    path: 'example',
    component: ExampleComponent
  }
]

@NgModule({
  declarations: [
    AppComponent,
    ExampleComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(ROUTES),
    NgTagsInput
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

我认为你正在混淆Angular和AngularJS。您似乎正在使用this directive，这是针对AngularJS的。我认为this是Angular 2的端口.AngularJS和Angular 2+非常不同，它们的指令通常不经修改就兼容。

这意味着npm install ng2-tag-input --save

import { TagInputModule } from 'ng2-tag-input';
import { BrowserAnimationsModule } from '@angular/platform-
browser/animations'; // this is needed! 

@NgModule({
   imports: [ TagInputModule, BrowserAnimationsModule, ...OtherModules ] // along with your other modules 
})
export class AppModule {}

Angular - ng-tags-input。＆＃34;角度未定义＆＃34;

1 个答案:

Angular - ng-tags-input。 ＆＃34;角度未定义＆＃34;

1 个答案:

Angular - ng-tags-input。＆＃34;角度未定义＆＃34;