当前位置：首页 > 软件库 > Web应用开发 > Web框架 >

ng-dynamic

dynamic contents projection in Angular

授权协议 Readme

开发语言 JavaScript

所属分类 Web应用开发、 Web框架

软件类型开源软件

地区不详

投递者夔高寒

操作系统跨平台

开源组织无

适用人群未知

软件概览

THIS REPOSITORY IS NOT MAINTAINED

ng-dynamic

Since Angular 4.0, AoT compiler cannot coexist with JiT compiler. If you want to use DynamicComponentModule, you cannot use AoT compilation.

Dynamic Content Projection in Angular 2+

$ npm install --save ng-dynamic

Live Demo: Plunker

'dynamic' means...

We often need to project some dynamic contents into your Angular app. For example, if you make a markdown editor, you want to display the rendererd preview.

@Component({
  selector: 'html-preview',
  template: '<div [innerHTML]="html"></div>',
})
export class HTMLPreviewComponent {
  @Input() html: string;
}

This code has some problems:

[innerHTML] will sanitize its value and strip some elements.
in innerHTML, any Angular components like <my-button> don't work.

ng-dynamic can solve these problems by using standard Angular APIs and some hacks.

`<dynamic-html [content]="html">`

<dynamic-html> is a component to render given HTML string and mount components in the HTML.

Example:

@Component({
  selector: 'my-button',
  template: `<button (click)="onClick()">Click Me</button>`
})
export class MyButtonComponent {
  onClick() {
  }
}

@Component({
  selector: 'my-app',
  template: `
    <dynamic-html [content]="content"></dynamic-html>
  `
})
export class AppComponent {
  content = `
  <article>
    <h1>Awesome Document</h1>
    <div>
      <p>bla bla bla</p>
      <my-button></my-button>
    </div>
  </article>
  `;
}

@NgModule({
  imports: [
    DynamicHTMLModule.forRoot({
      components: [
        { component: MyButtonComponent, selector: 'my-button' },
      ]
    })
  ],
  declarations: [AppComponent, MyButtonComponent],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Result:

<my-app>
    <dynamic-html>
      <article>
        <h1>Awesome Document</h1>
        <div>
          <p>bla bla bla</p>
          <my-button>Click Me</my-button>
        </div>
      </article>
    </dynamic-html>
</my-app>

<my-button> is resolved as MyButtonComponent.

`DynamicHTMLModule`

To use <dynamic-html>, you have to import DynamicHTMLModule with forRoot static method.Its argument is a DynamicHTMLOptions object:

/**
 * defines dynamic-projectable components 
 * 
 * ```ts
 * @Component({
 *     selector: 'child-cmp',
 *     template: `<p>child:{{text}}</p>`,
 * })
 * class ChildCmp { 
 *     @Input() text: string;
 * }
 * 
 * DynamicHTMLModule.forRoot({
 *   components: [
 *     { component: ChildCmp, selector: 'child-cmp' } },
 *   ]
 * })
 * ```
 */
export interface ComponentWithSelector {
    /**
     * component's selector
     */
    selector: string;
    /**
     * component's type
     */
    component: Type<any>;
}

/**
 * options for DynamicHTMLModule
 */
export class DynamicHTMLOptions {
    /**
     * identifies components projected in dynamic HTML.
     */
    components: Array<ComponentWithSelector>;
}

`OnMount` Lifecycle method

/**
 * Lifecycle hook that is called after instantiation the component. 
 * This method is called before ngOnInit.
 */
export abstract class OnMount {
    abstract dynamicOnMount(attrs?: Map<string, string>, innerHTML?: string, element?: Element): void;
}

OnMount allows you to create component has hybrid content projection.hybrid content projection means that the component can project its content from even static template or dynamic HTML.

`<dynamic-html>` Constraints

[content] is not a template. so it cannot resolve {{foo}}, *ngIf and any template syntax.

`*dynamicComponent="template"`

dynamicComponent is a directive to create dynamic component which has the template.

Example:

@Component({
  selector: 'dynamic-cmp-demo',
  template: `
    <div *dynamicComponent="template; context: {text: text};"></div>
  `,
})
export class DynamicCmpDemoComponent {
  template = `
  <article>
    <h1>Awesome Document</h1>
    <div>
      <p>{{text}}</p>
      <my-button></my-button>
    </div>
  </article>
  `;

  text = 'foo';
}

@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [
    MyComponent
  ],
  exports: [
    MyComponent
  ]
})
export class SharedModule { }

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    SharedModule,
    DynamicComponentModule.forRoot({
      imports: [SharedModule]
    }),
  ],
  declarations: [
    AppComponent,
    DynamicCmpDemoComponent,
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Result:

<my-app>
    <ng-component>
      <article>
        <h1>Awesome Document</h1>
        <div>
          <p>foo</p>
          <my-button>Click Me</my-button>
        </div>
      </article>
    </ng-component>
</my-app>

<my-button> is resolved as MyButtonComponent.

`DynamicComponentModule`

To use dynamicComponent, you have to import DynamicComponentModule with forRoot static method.Its argument is a NgModule metadata object:

/**
 * Setup for DynamicComponentDirective
 * 
 * ```ts
 * @NgModule({
 *   imports: [
 *     DynamicComponentModule.forRoot({
 *       imports: [CommonModule]
 *     })
 *   ],
 * })
 * class AppModule {}
 * ```
 */

`dynamicComponent` Constraints

dynamicComponent needs JitCompiler. You cannot use AoT compilation with DynamicComponentModule.

License

MIT

Developing

npm i && npm run demo # and open http://localhost:8080

Contributions welcome!

使用案例

angularjs-dynamic-ng-pattern-validation

http://stackoverflow.com/questions/18900308/angularjs-dynamic-ng-pattern-validation http://jsfiddle.net/2G8gA/1/ 转载于:https://www.cnblogs.com/skating/p/6293283.html
ng-form

ng-form用来在一个表单内部嵌套另一个表单。普通的HTML <form>标签不允许嵌套,但ng-form可以。这意味着内部所有的子表单都合法时,外部的表单才会合法。这对于用ng-repeat动态创建表单是非常有用的。由于不能通过字符插值来给输入元素动态地生成name属性,所以需要将ng-form指令内每组重复的输入字段都包含在一个外部表单元素内。下面的CSS类会根据表单的验证状态自动设置
ng-repeat定义次数而不是重复数组？

本文翻译自：Way to ng-repeat defined number of times instead of repeating over array? Is there a way to ng-repeat a defined number of times instead of always having to iterate over an array? 有没有办法重复定义的次数而不是
AngularJS – Conditional Display using ng-show / ng-hide, ng-if, ng-include, ng-switch

http://realityonweb.com/angularjs/angularjs-conditional-display-using-ng-show-ng-hide-ng-if-ng-include-ng-switch/ Hiding or showing parts of a DOM based on some conditions is a common requirement. Ang
ng-form和ng-required的使用

1 <!doctype html> 2 <html lang="en" ng-app="myApp"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0,
[转]ng-grid Auto / Dynamic Height

本文转自：https://stackoverflow.com/questions/23396398/ng-grid-auto-dynamic-height I think I solved this problem perfectly after 48 hours, var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.g
AngularJS 指令ng-form

由于AngularJS中用来取代<form>的ng-form指令可以嵌套，并且外部表单在所有子表单都合法之前一直处于不合法状态，因此我们可以在动态生成子表单的同时使用表单验证功能。是的，鱼和熊掌可以兼得。 <!doctype html> <html ng-app="myApp"> <head> <link rel="stylesheet" href="//cdn.jsdelivr.net/
angularJS学习之路（十四）---ng-form

<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8"> <title></title> </head> <body> <form name="signup_form" ng-controller="FormController" ng-submit="submitForm()" > <di
立Flag 学习Ng - 缓存及压缩&动静分离&https

立Flag 学习Ng - 缓存及压缩&动静分离&https 动静分离缓存配置及Gzip配置 https配置缓存及压缩 location ^~ /qq.png { # expires 2s;#缓存2秒 expires 2m;#缓存2分钟 # expires 2h;#缓存2小时 # expires 2d;#缓存2天 root html/gzip; } locati
日志收集-Flume-ng-mongodb-sink

本文主要介绍使用Flume传输数据到MongoDB的过程，内容涉及环境部署和注意事项。一、环境搭建 1、flune-ng下载地址：http://www.apache.org/dyn/closer.cgi/flume/1.5.2/apache-flume-1.5.2-bin.tar.gz 2、mongodb java driver jar包下载地址：https://oss.sonatype.o
如何动态构建 HTML 表格作为发送电子邮件的模板 (ng-repeat)

angularjs 不能直接使用，但 angular 2+ 支持它(在服务器上使用 nodejs：https ://angular.io/guide/universal )。我有一个相同的需求，我记得尝试使用在 selenium webdriver 中运行在服务器上的 angularjs 来实现你想要的，但我找不到一个完整和简单的解决方案。相反，我复制了我的 ng-repeat 模板并将它们转

ng-dynamic

THIS REPOSITORY IS NOT MAINTAINED

ng-dynamic

Since Angular 4.0, AoT compiler cannot coexist with JiT compiler. If you want to use DynamicComponentModule, you cannot use AoT compilation.

'dynamic' means...

`<dynamic-html [content]="html">`

`DynamicHTMLModule`

`OnMount` Lifecycle method

`<dynamic-html>` Constraints

`*dynamicComponent="template"`

`DynamicComponentModule`

`dynamicComponent` Constraints

License

Developing

同类工具

相关阅读

相关文章

相关问答

相关文档

ng-dynamic

THIS REPOSITORY IS NOT MAINTAINED

ng-dynamic

Since Angular 4.0, AoT compiler cannot coexist with JiT compiler. If you want to use DynamicComponentModule, you cannot use AoT compilation.

'dynamic' means...

<dynamic-html [content]="html">

DynamicHTMLModule

OnMount Lifecycle method

<dynamic-html> Constraints

*dynamicComponent="template"

DynamicComponentModule

dynamicComponent Constraints

License

Developing

同类工具

相关阅读

相关文章

相关问答

相关文档

`<dynamic-html [content]="html">`

`DynamicHTMLModule`

`OnMount` Lifecycle method

`<dynamic-html>` Constraints

`*dynamicComponent="template"`

`DynamicComponentModule`

`dynamicComponent` Constraints