在 Angular 网站部署 Google 广告

原文地址：http://www.bowen-tech.top/art...

在Angular开发的网站部署Google广告

Google广告代码是包含script代码的，如果直接复制Google广告到Angular的html页面上，编译时是会去除掉script标签代码，具体可看这个GitHub文章：传送门

新建component

• component的template写上google广告的代码，不包含script标签的代码,如下：

 template: `

    
  
`

• init方法初始化window.adsbygoogle

ngAfterViewInit() {
    try{
      (window['adsbygoogle'] = window['adsbygoogle'] || []).push({});
    }catch(e){
      console.error("error");
    }

• 完整代码

import { Component, AfterViewInit} from '@angular/core';
// 
@Component({
  selector: 'app-commemoration-ad',
  template: `

    
  
`
})
export class CommemorationAdComponent implements AfterViewInit {

  constructor() { }

  ngAfterViewInit() {
    try{
      (window['adsbygoogle'] = window['adsbygoogle'] || []).push({});
    }catch(e){
      console.error("error");
    }
  }

}

html引入模块

index.html引入js文件

注意

如果是定义的公共模块，需要在模块里面申明