Question

我试图创建一个非常简单的2页chrome扩展程序。第一页处理登录，第二页显示用户可以单击以登记的按钮。按钮内部是一个计时器，让用户知道他有多少时间，直到下一次办理登机手续。

以下是我的清单和背景页面：

的manifest.json

{
"name": "...",
"description": "...",
"version": "0.1",
"manifest_version": 2,
"icons": {
  "16": "assets/favicon-16.png", 
  "128": "assets/favicon-128.png"
},
"background": {
  "page": "index.html",
  "persistent": false
},
"browser_action": {
  "default_icon" : "assets/favicon.ico",
  "default_popup": "index.html#/login"
},
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

的index.html

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>PROOf of LIFE</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="assets/favicon.ico">
    <script type="text/javascript" src="/assets/background.js"></script>
  </head>

  <body>
    <app-root></app-root>
  </body>

</html>

现在解决问题：

点击＆＃39; ENTER＆＃39;按钮（prtscrn）它调用login()，执行完全正常，发送api调用并接收响应，但当它到达this.router.navigate(['/check-in']);时，视图只显示一个小的空白方块（{ {3}}）而不是来自check-in.html的html ...而我认为更奇怪的是我可以点击该空白方块，其中应该显示签到按钮，并且将运行check-in()方法，有效地写入数据库，这告诉我它确实导航到我想要的路由器链接...但是功能如何在那里并且没有呈现视图？ / p>

login.component.ts

import { Component }         from '@angular/core';
import { NgForm }            from '@angular/forms';
import { UserService }       from '../user-service.service';
import { DataService }       from '../data-service.service';
import { AuthGuard }         from '../auth-guard.service';
import { User }              from '../models/user';
import { Router }            from '@angular/router';

@Component({
  templateUrl: './login.component.html',
})

export class LoginComponent {

  title = 'PROOF of LIFE';
  isRequesting : boolean = false;
  errors : string; 
  userLoginModel: User = {
    email: '',
    pin: '',
  };

  constructor(private dataService: DataService, private userService: UserService, private router : Router) {}

  login() {
    this.isRequesting = true;
    this.userService.isRequesting = true;

    let utcOffset = new Date().getTimezoneOffset();

    this.userService.login(this.userLoginModel.email, this.userLoginModel.pin, utcOffset, (userInfo) => {

        if (!userInfo) {
            this.errors = 'Email and/or pin is incorrect.';
            this.isRequesting = false;
            this.userService.isRequesting = false;
            return;
        }

        sessionStorage.setItem('authentication_token', userInfo.auth_token);
        sessionStorage.setItem('next_PoL_action', userInfo.next_PoL_action);

      this.dataService.authGetData(`api/users/user?id=${userInfo.id}`, (currentUser) => {
        sessionStorage.setItem('current_user', JSON.stringify(currentUser));   
            this.router.navigate(['/check-in']);
            this.isRequesting = false;
            this.userService.isRequesting = false;
      }, (error) => {
        this.isRequesting = false;
        this.userService.isRequesting = false;
        this.errors = error;
        return;
      });
        }, (error) => {
            this.isRequesting = false;
            this.userService.isRequesting = false;
            this.errors = error;
        });
    }

}

以下是 check-in.html （应显示）

<section class="section" id="homepage-section">

  <div class="container">

      <h1 class="header-title">{{ title }}</h1>

      <div *ngIf="errors" class="alert alert-danger" role="alert">
          <strong>NOT OK!</strong> {{errors}}
      </div>

      <div class="pol-button-cont">
          <div (click)="checkIn()" class="pol-button" [class.button-grey]="status == 0" [class.button-blue]="status == 1" [class.button-red]="status == 2" [class.button-black]="status == 3">
            <div *ngIf="checkinTimer > 0 && currentUser.Active != false" class="pol-button-timer">{{ checkinTimer | secondsToTime }}
            </div>
            <div *ngIf="checkinTolerance > 0 && checkinTimer < 0 && currentUser.Active != false" class="pol-button-timer">
                    {{ checkinTolerance | secondsToTime }}
            </div>
            <div *ngIf="currentUser.Active == false" class="pol-button-text-small">
                    inactive
            </div>
          </div>
      </div>

  </div>

</section>

我很乐意提供任何其他信息，请告诉我您的需求。我确定我只是错过了一些非常愚蠢和基本的东西......谢谢你的帮助。

[编辑]我应该提一下我发现prtscrn的问题，但答案最多是模糊的，并没有完全回答我的问题。

Answer 1

我通过向height添加特定width和body来解决问题。显然一切都在那里，它只是被隐藏了，因为我没有设置页面的大小。

Chrome扩展程序：如何在router.navigate上更改视图

1 个答案: