OneSignal Angular Sample下载 - OneSignal Angular Sample源代码下载

OneSignal Angular Sample

网站数据

1.0.0

下载

将通知集成在角度

笔记：

创建一个免费的信号帐户
遵循典型设置的步骤
本教程需要有关角度的一些基本知识
角11.2.9
Nodejs版本14.0

repo：

快速设置
高级设置

现场演示

使用Angular CLI创建一个新的角度项目

快速推送通知设置在Angular中

在您的项目文件夹中，导航到index.html文件以及HEAD HTML标签的内部，粘贴以下代码并添加您的应用ID。

 < script src =" https://cdn.onesignal.com/sdks/OneSignalSDK.js " async ="" > </ script >
< script >
  window . OneSignal = window . OneSignal || [ ] ;
  OneSignal . push ( function ( ) {
    OneSignal . init ( {
      appId : "YOUR-APP-ID" ,
    } ) ;
  } ) ;
</ script >

现在，在计算机中下载SDK文件，然后将它们插入Angular应用程序的SRC文件夹中。

将SDK文件插入Angular项目后，我们需要使Angular了解这些SDK文件。打开Angular.json文件并找到架构属性和该属性的内部，您将在属性的底部看到另一个称为资产的属性，添加了Onessignal SDK的位置。

您的Angular.json应该看起来像这样：

...
"assets" : [
              "src/favicon.ico" ,
              "src/assets" ,
              "src/OneSignalSDKUpdaterWorker.js" ,
              "src/OneSignalSDKWorker.js" ,
            ] ,
...

高级推送通知设置

如果您想将推送通知提升到一个新的水平，并且能够在整个Angular应用程序中使用onsignal，我将向您展示如何做到这一点。

注意：如果您尚未完成快速推送通知设置，请确保这样做。

内部index.html文件，删除此代码：

 < script >
  window . OneSignal = window . OneSignal || [ ] ;
  OneSignal . push ( function ( ) {
    OneSignal . init ( {
      appId : "YOUR-APP-ID" ,
    } ) ;
  } ) ;
</ script >

}

在您的根文件夹中，创建一个名为Globals.ts的新文件。我这个文件您将插入以下代码：

 export { }
 
declare global {
    interface Window {
      OneSignal: any ;
    }
}

上面的代码将允许我们使用window.OneSignal对象，而无需看到任何TS和编译器错误。现在您已经创建了Globals.ts文件，将其导入到您的polyfills.ts文件中。

 import 'globals' ;

是时候在Angular应用程序内部创建我们的Onesignal服务了。我已经使用角CLI创建了一个。我的服务文件的名称是一信号。Service.ts 。创建服务后，您将创建一个onLoad()方法，该方法将确保我们在index.html中添加的SDK脚本已加载，因为它是异步操作。

async onLoad ( ) : Promise < any > {
    window . OneSignal = window . OneSignal || [ ] ;
    return new Promise ( ( resolve ) => {
      window . OneSignal . push ( function ( ) {
        resolve ( window . OneSignal ) ;
      } ) ;
    } ) ;
  }

在OneSignal服务中，创建一个名为onInit()的新方法。在方法内部，您将调用onLoad() ，然后初始化onsignal。

 onInit ( ) : void {
    this . onLoad ( ) . then ( ( OneSignal ) => {
      OneSignal . init ( {
        appId : "YOUR-APP-ID" ,
      } ) ;
    } )
  }

最后，打开您的app.component.ts文件，并注入您刚创建的OneSignal服务。 gOnInit()内部从OneSignal Service调用onInit()方法。您的文件看起来像这样：

 import { Component , OnInit } from '@angular/core' ;
import { OneSignalService } from './one-signal.service' ;
 
 
@ Component ( {
  selector : 'app-root' ,
  templateUrl : './app.component.html' ,
  styleUrls : [ './app.component.scss' ]
} )
 
export class AppComponent implements OnInit {
  title = 'OneSignal-Angular' ;
 
  constructor ( private os : OneSignalService ) { }
  
  ngOnInit ( ) { 
    this . os . onInit ( ) ;
  }
}