角度2 /打字稿范围

时间:2017-12-18 18:07:10

标签: angular typescript

我是使用打字稿和角度编程的新手。我写了第一个组件,并认出了一个非常奇怪的行为。当我在输入表单中写东西时,它会在浏览器之间传播字符,当我打开两个窗口时。似乎每个会话只共享一个组件?

@Component({
selector: 'login',
providers: [AuthService],
template: `
    <div class="container my_container">
        <div class="row">
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"></div>
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 my_login">
                <h1 class="my_h1">Login </h1>
                <div class="form-group">
                    <input type="text" placeholder="E-Mail" class="form-control" [(ngModel)]="admin.email"
                           name="email">
                </div>
                <div class="form-group">
                    <input type="password" placeholder="Password" class="form-control" [(ngModel)]="admin.password"
                           name="password">
                </div>
                <button (click)="login()" type="button" class="btn btn-lg btn-primary btn-block">Sign in</button>
            </div>
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"></div>
        </div>
    </div>

`})

export class LoginComponent implements OnInit {
admin: Admin;
returnUrl: string;

constructor(private route: ActivatedRoute,
            private router: Router,
            private authService: AuthService) {
}

ngOnInit(): void {
    document.getElementById('myNavbar').style.display = "none";
    this.admin = new Admin("","");
    this.authService.logout();
    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
}

login() {
    if (this.admin.email != "" && this.admin.password != "") {
        if (this.authService.login(this.admin.email, this.admin.password)) {
            document.getElementById('myNavbar').style.display = "block";
            this.router.navigate([this.returnUrl]);
        } else {
            alert("Wrong username or password!");
        }
    } else {
        alert("Fill username and password")
    }
}}

有人可以解释一下如何避免这种行为吗?

由于 JerryP

1 个答案:

答案 0 :(得分:0)

感谢您的建议。它是ghostMode中的BrowserSync,它通过浏览器镜像所有操作。在bs-config.json中设置“ghostMode”:false可以解决这个问题。