在前端开发中，经常需要往页面中添加广告。然而，广告代码往往比较冗长，而且不同广告平台的代码也略有区别。为了简化广告的添加过程，并且保持一定的灵活性，我们可以使用一个 npm 包叫做 ngx-ad-dfp。
使用 ngx-ad-dfp，我们可以很方便的在页面中添加多种不同广告的代码。这个 npm 包使用了谷歌的 DoubleClick for Publishers (DFP) 服务，该服务在广告投放及管理领域非常出名，支持各种广告形式，比如 banner 广告、插屏广告、原生广告等等。
本文将介绍 ngx-ad-dfp 的具体使用方式，并且给出实际的代码示例。
安装 ngx-ad-dfp
要安装 ngx-ad-dfp，我们可以使用 npm，执行以下指令：
npm install ngx-ad-dfp
这个指令会从 npm 仓库中下载 ngx-ad-dfp，并且安装在当前项目中。注意，我们需要确保已经安装了 Angular。
在组件中使用 ngx-ad-dfp
在组件中使用 ngx-ad-dfp 很简单。我们首先需要导入 ngx-ad-dfp 中的 AdDirective，并且将它添加到组件中使用广告的 HTML 元素上。例如，我们可以在组件的 HTML 模板中加入以下代码：
<div ad> <!-- 在这里添加广告代码 --> </div>
这里的 ad 指令是我们在组件中导入 AdDirective 后定义的。我们还需要在组件的 TypeScript 文件中导入 AdDirective，并将其注入到组件的 providers 中。示例代码如下：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ----------- - ---- ------------- ------------ --------- ----------- ------------ ----------------------- ---------- ------------- -- ------ ----- ------------ - ----- - --------- -
AdDirective 是一个抽象类，我们需要创建具体的广告类型来实现它。例如，我们可以创建一个叫做 BannerAdComponent 的组件，代码如下：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ----------- - ---- ------------- ------------ --------- --------------- --------- ----- ---------- -- ------ ----- ----------------- ------- ----------- - -------- - ---------------------- -
在这个代码例子中，BannerAdComponent 继承了 AdDirective，并且定义了一个 adUnitId，它代表了我们要显示的广告单元。
配置 DFP 服务
我们还需要配置 DFP 服务，才能使 ngx-ad-dfp 正常工作。我们需要打开谷歌的 DFP 管理控制台，在 Dashboard 标签页下找到「Inventory」项，点击它然后选择「Ad units」。
然后，我们可以在 Ad units 页面中创建新的广告单元。每个广告单元都有一个唯一的 ID，它是一个字符串。我们需要根据这个 ID，将其配置到我们要显示该广告的组件中。
显示广告
最后一步是在组件中显示广告。我们可以使用 JavaScript 来获取广告元素，然后使用 DFP API 在其中添加广告内容。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- -------------
------ - ---------- - ---- -------------
------------
--------- ---------------
--------- ----- ----------
--
------ ----- ----------------- ------- ----------- -
-------- - ----------------------
------------------- ---- ----------- -
--------
-
------------ -
----- -- - ----------------------------
----- ---- - ------------------------------------ ----
-------------------------
-
-在这个例子中，我们使用了 DfpService 来操作广告。onAdLoaded 方法是在广告被加载之后调用的，我们在其中获取 ad 元素，创建新的广告槽，然后使用它来显示广告内容。
结论
通过使用 ngx-ad-dfp，我们可以很方便的在 Angular 应用程序中添加多种不同类型的广告。这个 npm 包使用了 DFP 服务，它是非常流行的广告投放与管理平台。
我们可以使用 AdDirective 来定义不同的广告类型，并且在组件中使用它。然后，我们需要配置 DFP 服务，并且使用 DfpService 来将广告显示到页面中。通过这些步骤，我们可以快速的实现广告投放，并且轻松的管理广告内容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b6251ab1864dac67384