Question

我正在使用Angular构建chrome扩展。我有一个简单的登录表单：

<div class="form-group">

<div *ngIf="error" class="alert alert-danger">Invalid Credentials</div>

<label>Username</label>
<input [(ngModel)]="username" class="form-control" />

<label>Password</label>
<input [(ngModel)]="password" class="form-control"  />

<button (click)="login(username, password)" class="btn btn-lg">Login</button>
</div>

当我在浏览器中运行应用程序时它工作正常 - 使用正确的值调用控制器上的登录方法。

但是，当我在Chrome扩展程序中运行应用程序时（将我的dist文件夹作为解压扩展程序加载），绑定似乎不起作用。 username和password字段未定义，但调用了登录方法。

我很乐意提供尽可能多的信息，但是当我作为Chrome扩展程序运行时，我需要做些什么才能使应用程序正确绑定？

这是组件：

@Component({
  selector: 'login',
  templateUrl: './login.component.html'
})
export class LoginComponent {

  username: string;
  password: string;
  error: boolean;

  constructor(private loginService: LoginService,
    private storageService: StorageService,
    private router: Router) {

  }

login(username: string, password: string) {
this.loginService.login(username, password)
  .subscribe(result => {
    if (result) {
      this.error = false;
      this.router.navigateByUrl('customers');
    }
    else {
      this.error = true;
    }
  });

} }

这是运行扩展时的实际html，我没有看到应用了角度绑定：

<login><div class="form-group">

    <!---->

    <label>Username</label>
    <input class="form-control">

    <label>Password</label>
    <input class="form-control">

    <button class="btn btn-lg">Login</button>
</div></login>

当作为chrome扩展名运行时，Angular 2绑定不起作用

0 个答案: