编辑文章

描述:

封面图上传：

点击上传图片

### 在Angular8开发的网站部署Google广告
Google广告代码是包含script代码的，如果直接复制Google广告到Angular的html页面上，编译时是会去除掉script标签代码，具体可看这个GitHub文章：[传送门](https://github.com/angular/angular/issues/4903)
### 新建component
- component的template写上google广告的代码，不包含script标签的代码,如下：

```js
 template: `<div>
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-xxxxxxx"
         data-ad-slot="xxxxx"
         data-ad-format="auto"
         data-full-width-responsive="true"></ins>
  </div>`
```
- init方法初始化window.adsbygoogle

```js
ngAfterViewInit() {
    try{
      (window['adsbygoogle'] = window['adsbygoogle'] || []).push({});
    }catch(e){
      console.error("error");
    }
```
- 完整代码

```js
import { Component, AfterViewInit} from '@angular/core';
// 
@Component({
  selector: 'app-commemoration-ad',
  template: `<div>
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-xxxxxxx"
         data-ad-slot="xxxxx"
         data-ad-format="auto"
         data-full-width-responsive="true"></ins>
  </div>`
})
export class CommemorationAdComponent implements AfterViewInit {

constructor() { }

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

}
```

#### html引入模块

```

<app-commemoration-ad></app-commemoration-ad>
```
#### index.html引入js文件
```html
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
```

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