构建器 Angular SDK
使用"构建器"Angular SDK来用"构建器"来使用"构建器". 您可以从浏览Builder的正式文件开始, 或者从右侧挖掘到这个目录中的代码 。 官方文档提供了更明确的指令,而这个README则共享了更通用的指针.
备选方案1(对于新到Angular的文件):使用构建器正式文件
关于分步骤的指南,见Builder官方的Angular指示 整合页面 文档。 虽然我们建议从Page Building开始,但您也可以整合各节和数据:
| 整合页面大楼 | 综合科大楼 | 整合 CMS 数据 |
|
|
|
备选案文2(Angular aficionado):使用以下简要说明
如果你更喜欢直接潜入代码, 呆在这里一些指针 使用构建器 Angular SDK.
使用量
安装 :
npm install @builder.io/angular
npm install @angular/elements
添加模块 :
import { BuilderModule } from '@builder.io/angular';
@NgModule({
...
imports: [ BuilderModule.forRoot('YOUR_API_KEY') ],
...
})
export class MyAppModule { }
说明:你可以
YOUR_API_KEY从 https://builder.io/account/space 页面存档备份,存于互联网档案馆。 。 。 .
然后在您喜欢的地方添加组件:
<!-- The model input can be any model of yours -->
<builder-component model="page" (load)="contentLoaded($event)" (error)="contentError($event)">
<!-- Default content inside the tag shows while the builder content is fetching -->
<div class="spinner"></div>
</builder-component>
然后,更新您的模型的预览 URL , 以允许像 本指南说完了!
接下来,关于更先进的使用,见下文信息,以及 对模型的介绍 用于创建自定义模型,
财务报告和审定财务报表 搜索优化 用于优化您的内容。 (用于Angular 使用来自 load 输出以获取自定义字段数据。 )
自定义代码中的登陆页
将您的 404 组件替换为下面的类似内容, 以便于在 Builder 中创建新页面 :
<!-- The model input can be any model of yours -->
<builder-component
*ngIf="!noBuilderPageForUrl"
model="page"
(load)="noBuilderPageForUrl = $event ? false : true"
(error)="noBuilderPageForUrl = true"
>
<!-- Default content inside the tag shows while the builder content is fetching -->
<div class="spinner"></div>
</builder-component>
<my-404-component *ngIf="noBuilderPageForUrl"> </my-404-component>
使用自定义字段
自定义字段 在使用定制时是一个强大的特性 模型,用于各种定制,例如: SEO 优化 您的内容.
<builder-component model="page" (load)="contentLoaded($event)">
<!-- Default content inside the tag shows while the builder content is fetching -->
<div class="spinner"></div>
</builder-component>
contentLoaded(data) {
// Data object (via the output $event) includes your custom fields, e.g. if you have a custom field named
// "title"
document.title = data.data.title
}
现有页面中的构建部分
使用区段模型,您可以在已有的页面中/周围使用 Builder.io 组件(aka,它不需要控制整个页面). 参见关于为此制作自定义模型的信息 这里
<!-- The first part of your page -->
<builder-component model="announcement-bar">Loading..</builder-component>
<!-- the rest of your page -->
然后可以使用 查询 财务报告和审定财务报表 目标 以自定义内容加载到何处
在构建器页面中使用您的角构件
您可以拖放在构建器编辑器中添加角元件, 并使用下面这样的最小标记 :
import { BuilderBlock } from '@builder.io/angular';
import { Component, Input } from '@angular/core';
@BuilderBlock({
tag: 'custom-thing',
name: 'Custom thing',
inputs: [
{
name: 'name',
type: 'string',
},
],
})
@Component({
selector: 'custom-thing',
template: 'Hello: {{name}}',
})
export class CustomThing {
@Input()
name = '';
}
注意自定义角元件使用 角元素 并只在浏览器中渲染(没有服务器侧渲染).
如果您需要服务器侧渲染, 请考虑使用 符号
见 这里 关于可用输入类型的详细信息.
自定义组件中的可编辑区域
- 为您每个可编辑的类别区块注册输入
blocks - 使用
builder-blocks-outlet组件来制作带有组件模板的块.
@Component({
selector: 'custom-thing',
template: `
<h2>Section A</h2>
<builder-blocks-outlet
[blocks]="sectionA"
[builderState]="builderState"
[builderBlock]="builderBlock"
dataPath="component.options.sectionA"
></builder-blocks-outlet>
<h2>Section B</h2>
<builder-blocks-outlet
[blocks]="sectionB"
[builderState]="builderState"
[builderBlock]="builderBlock"
dataPath="component.options.sectionB"
></builder-blocks-outlet>
`,
})
export class CustomThing implements OnChanges {
@Input()
name = '';
@Input()
builderBlock = null;
@Input()
builderState = null;
@Input()
sectionA = null;
@Input()
sectionB = null;
}
BuilderBlock({
tag: 'custom-thing',
name: 'Custom thing',
canHaveChildren: true,
inputs: [
{
name: 'name',
type: 'string',
},
{
name: 'sectionA',
type: 'blocks',
hideFromUI: true,
helperText: 'This is an editable region where you can drag and drop blocks.',
defaultValue: [
{
'@type': '@builder.io/sdk:Element',
component: {
name: 'Text',
options: {
text: 'Section A Editable in Builder...',
},
},
responsiveStyles: {
large: {
display: 'flex',
flexDirection: 'column',
position: 'relative',
flexShrink: '0',
boxSizing: 'border-box',
marginTop: '20px',
lineHeight: 'normal',
height: 'auto',
textAlign: 'center',
},
},
},
],
},
{
name: 'sectionB',
type: 'blocks',
hideFromUI: true,
helperText: 'This is an editable region where you can drag and drop blocks.',
defaultValue: [
{
'@type': '@builder.io/sdk:Element',
component: {
name: 'Text',
options: {
text: 'Section B Editable in Builder...',
},
},
responsiveStyles: {
large: {
display: 'flex',
flexDirection: 'column',
position: 'relative',
flexShrink: '0',
boxSizing: 'border-box',
marginTop: '20px',
lineHeight: 'normal',
height: 'auto',
textAlign: 'center',
},
},
},
],
},
],
})(CustomThing);
传递数据和上下文
也可以通过 数据 财务报告和审定财务报表 函数 下至用于UI的构建器组件(例如绑定) 数据值为UI, 例如, 用于文本值或列表上显示的值, 以及触发例如单击按钮的行动 )
所有通过的数据都可用Builder 提供 行动和约束 作为 state.*,例如以下例子 state.resources等将可用
@Component({
selector: 'app-root',
template: '<builder-component [options]="options" [context]="context" [data]="data" model="page"></builder-component>',
})
export class AppComponent {
options: any = {
cacheSeconds: 1,
data: {
locale: 'en-US',
},
};
data = {
resources: [ { foo: 'bar'} ]
};
context= {
myFunction: (text: string) => alert(text),
}
您也可以传递函数、自定义对象等复杂数据以及您可以使用的库 context。上下文会一直向下传递(例如通过符号等)。 此数据没有观察到变化和突变
背景情况见 行动和约束 作为 context.*,例如 context.myFunction('hello world') 实例