标签: angular7

我们在角度7和NodeJS上实现了PWA作为后端.推送通知从后端通过web-push发送,并由角度服务工作者服务处理.

我们希望Android中的行为是当用户点击通知时,应用程序在设备中打开(即PWA从后台出现并且对用户可见).

目前,代码接缝在后台执行,但PWA不是来自后台(即用户点击推送通知但没有任何反应).

推送通知由前端名为SwPush的角度服务处理,并使用角度应用程序的典型AppComponent组件中的以下代码传递给app:

export class AppComponent implements OnInit {
    constructor(private swPush: SwPush) { }

    ngOnInit(): void {
        try {
            if (this.swPush.isEnabled) {
                this.swPush.notificationClicks.subscribe(
                    event => {
                        window.focus();
                        window.open(event.notification.data.url, '_self');
                    },
                    error => {
                        // handle error
                    }
                );
            }
        } catch (err) {
            // handle error
        }
    }
}

我搜索了整个SO网站,但没有找到这个问题.关于其他SO问题的评论,以避免往返其他SO答案的链接:

• 我已经阅读了这个问题,在我的情况下,处理程序内的控制台日志执行没有问题

• 另一个问题是建议在service-worker库中添加代码的解决方法,但据我所知,这是因为他们使用的是角度5而不是角度7(SwPush服务包含notificationclick处理程序).无论如何,我需要的是模拟这一行:

  event.waitUtil(clients.openWindow(URL));

当使用角度7的SwPush服务时,当用户点击推送通知时,如何打开PWA？

我正在努力使用Angular框架来使我的应用程序顺利运行,但我无法解决路由问题.我有一个顶级,AppComponent并app-routing.module.ts通过我的自定义管理导航SlideMenuComponent.我简化的html模板AppComponent:

<app-slide-menu [buttons]="menuButtons"></app-slide-menu>
<router-outlet></router-outlet>

我SlideMenuComponent的以下html为核心:

<nav><div *ngFor="let button of buttons">
    <a routerLink="{{button.routerLink}}"
    >{{button.name}}</a>
</div></nav>

用户可以导航'/courses'到此幻灯片菜单,该菜单由CoursesComponent分页指向由指向CourseComponent服务器检索的特定s的链接监督.这些组件位于各自的courses.module.ts模块中courses-routing.module.ts.但是,当我点击任何这些链接时,我会收到Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?控制台警告,ngOnInit()不会被打开CourseCompontent,并且它不会更新,直到我点击页面上的任何按钮.我router.navigate()通过转发此任务解决了手动导航时出现此问题NgZone.runTask(router.navigate()),但为什么会发生anchor标签和routerLinkdirecrives？这是我的CoursesComponent代码摘录:

<nav><ul>
        <li *ngFor="let course of api.data | paginate: {
            currentPage: currentPage, itemsPerPage: limit, totalItems: api.total
        }">
           <a
               [routerLink]="course._id"
               [queryParams]="{ …

我的问题是为什么会出现这个错误？

src/app/p2p/p2p.component.ts(14,16)中的错误:错误TS2580:找不到名称'require'.您是否需要为节点安装类型定义？试试npm i @types/node.

我安装了

 @types/node
in app/tsconfig.app.json have add 
"types": [
    "node" 
  ],
  "typeRoots": [ 
  "../node_modules/@types"
 ]  

但有错误找不到'要求'

我按照" https://angular.io/guide/service-worker-getting-started "中的说法完成了我的应用程序PWA.

正是使用了这个命令:

ng add @angular/pwa

npm install http-server -g

ng build --prod

http-server -p 8080 -c-1 dist

然后我在Chrome上打开了这个网址(隐身)

http://127.0.0.1:8080

当我为开发人员打开工具(f12)>应用程序>服务工作者时,没有可用的服务工作者,当我在那里设置离线时,网站不起作用.

有关我的角应用的其他信息:

package.json :(最重要的)

"@angular/core": "^7.0.2",
"@angular/pwa": "^0.10.6",
"@angular/service-worker": "^7.0.4",
"@angular-devkit/build-angular": "^0.10.6",
"@angular/cli": "^7.0.6",

我有一个我用它创建的Angular 7应用程序,@angular/cli然后我添加了一个库来使用ng generate library.它在dev模式等方面工作正常.没有问题.

我想保留与包含的库相关的依赖关系; 而不是混乱的主要应用程序package.json.所以,当然,我做npm install --save [xyx]了库文件夹.这工作得很好.仍然在dev模式中运行良好.

但是当我尝试这样做时ng build --prod,突然间它无法找到属于库的依赖项.当然,原因很明显; 他们没有被正确地捆绑在一起.我已经调查npm的bundleDependencies功能没有用,我已经看了lib: { embedded: ... }和whitelistedNonPeerDependencies选项ng-package.json,但我似乎无法做任何人做我想做什么比较.

这不是成败要求; 如果它是绝对必需的,我将只在主应用程序中安装依赖项.但我非常想避免这种情况.也许这是一个不合理的目标,我不确定.

任何帮助将不胜感激.

我有垫选择下拉列表如下

<mat-form-field>
   <mat-label>Gender</mat-label>
      <mat-select id="gender" required formControlName="gender">
         <mat-option id="Male" value="male"> Male </mat-option>
         <mat-option value="female"> Female </mat-option>
      </mat-select>
 </mat-form-field>

我正在尝试使用 Cypress 从该领域选择男性或女性。

cy.get('mat-select').click().select('Male')

使用上面的代码，我收到以下错误：

CypressError: cy.select() can only be called on a <select>. Your subject is a: <mat-select>

我需要一些帮助来解决这个问题，谢谢。

对我有用的代码。

cy.get('#gender').click().then(() => {
            cy.get('#male').click()
        })

最近角度引入角度材料的拖放 https://material.angular.io/cdk/drag-drop/overview.

所有示例都在单个组件中描述.如何在两个不同的组件中使用它,拖动一个组件项并放入另一个组件.

我有一个全局加载器,实现如下:

CoreModule:

router.events.pipe(
  filter(x => x instanceof NavigationStart)
).subscribe(() => loaderService.show());

router.events.pipe(
  filter(x => x instanceof NavigationEnd || x instanceof NavigationCancel || x instanceof NavigationError)
).subscribe(() => loaderService.hide());

LoaderService:

@Injectable({
    providedIn: 'root'
})
export class LoaderService {

    overlayRef: OverlayRef;
    componentFactory: ComponentFactory<LoaderComponent>;
    componentPortal: ComponentPortal<LoaderComponent>;
    componentRef: ComponentRef<LoaderComponent>;

    constructor(
        private overlay: Overlay,
        private componentFactoryResolver: ComponentFactoryResolver
    ) {
        this.overlayRef = this.overlay.create(
            {
                hasBackdrop: true,
                positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically()
            }
        );

        this.componentFactory = this.componentFactoryResolver.resolveComponentFactory(LoaderComponent);

        this.componentPortal = new ComponentPortal(this.componentFactory.componentType);
    }

    show(message?: string) {
        this.componentRef = this.overlayRef.attach<LoaderComponent>(this.componentPortal);
        this.componentRef.instance.message = …

我正在使用Bootstrap 4开发Angular应用程序。

我需要与我的angular应用程序中添加的scss相关的帮助。

我的问题是：

• 在Angular 6和Angular 7中添加bootstrap 4 scss的方式是否相同？

即

npm install bootstrap --save  

然后，打开angular.json文件，并将引导文件路径添加到样式部分。喜欢：

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],

以上两种方式的角度是否相同。

我正在尝试使用 ng-model 和 ng-hide 在 angular 7 中显示/隐藏一个 div，但它不起作用。

buttonto Show/Hide-用于ng-model设置表达式

    <button type="checkbox" ng-model="show" >show/hide</button>

div显示/隐藏，用于ng-hide隐藏div

<div class="row container-fluid" ng-hide="show" id="divshow" >
  Div Content
</div>    
</body>
</html>

我已经尝试过了ng-model，ng-hide但仍然无法正常工作。请提供解决方案