介绍
ngx-medium-widget 是开发者通过它能够很轻松地将 Medium 的文章嵌入到自己的应用程序中的一个开源 Angular 库。
安装
安装该 Library 最简单的方法是通过 npm 进行。您可以使用以下命令：
npm i ngx-medium-widget
使用
在 NgModule 中导入 MediumModule
为了使用 MediumModule，您需要首先导入 MediumModule 到您的 NgModule 中。以下是如何在您的 AppModule 中导入 MediumModule。
import { NgModule } from '@angular/core';
import { MediumModule } from 'ngx-medium-widget';
@NgModule({
imports: [MediumModule]
})
export class AppModule { }在组件中使用
接下来，在您的组件中使用 MediumWidget：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------- - ---- --------------------
------------
--------- -------------------
--------- -
------------------ ----------------------------------------
-
--
------ ----- ----------- -
-------- ------------------- - -
---- ----------------------------
--
-在上述示例中，创建一个名为 MyComponent 的组件，声明了一个 MediumWidgetOptions 的配置项对象，该对象具有一个 url 属性。然后在组件的 template 中将 options 对象传递给 MediumWidget。
配置选项
该 ngx-medium-widget 库有许多配置项，以下为一些常用的选项。
| 配置项 | 数据类型 | 描述 |
|---|---|---|
url |
{string} |
medium 作者的 url （必选项） |
recommend |
{boolean} |
是否在嵌入的文章下显示推荐文章。默认为 true。 |
latestLimit |
{number} |
显示最近的条目限制 |
limit |
{number} |
显示文章的条目限制。默认为 10。 |
maxHeight |
{number} |
Widget 的最大高度（需要以像素为单位）。默认为 null，表示没有最大高度限制。 |
示例代码
以下是一个完整示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------- - ---- --------------------
------------
--------- -------------------
--------- -
------------------ ----------------------------------------
-
--
------ ----- ----------- -
-------- ------------------- - -
---- -----------------------------
---------- ------
------------ --
------ --
---------- ---
--
-该示例中，我们定义了一个名为 MyComponent 的组件，并导入了 MediumWidgetOptions 对象。然后，我们在模板中定义了一个 MediumWidget，使用了 options 变量作为其输入参数。 options 对象具有以下属性：
url- 表示Medium作者的url。recommend- 表示是否在文章下方显示推荐阅读。默认为true。latestLimit- 表示显示最近文章的数量。默认为3。limit- 表示限制显示多少篇文章。默认为10。maxHeight- 表示 Widget 的最大高度（以像素为单位）。默认为null，表示没有最大高度限制。
这里我们将 MediumWidget 的高度限制为 500px，文章数量限制为 5，同时关闭了推荐文章和最近文章这两种功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d030d092702382294a