有没有一种方法可以直接从html中的标签角度到延迟加载组件<my-component></my-component>？
在组件模板解析期间,angular应该在找到任何html中没有或尚未加载的新标记时将整个组件加载到浏览器中.
我知道我们可以加载一个模块,使用loadChildren该模块仅特定于路由,还需要加载模块及其组件.我只搜索组件,直接搜索组件而不是模块.
我不想使用路由器或不想在我的应用程序中导入组件ot模块.我想当angular2找到一个不在html5中的标签时,它将在spcictfic文件夹中搜索并加载js和html文件并将该组件注入特定标签
我需要创建一个组件来显示另一个网页的内容。
例如，如果我有一个 stackoverflow 站点，我想创建一个组件来执行 http 请求并通过我的应用程序显示内容。顺便说一句，外部网站只是 django-rest-swagger 并且要访问它，我需要在每次访问它时包含一个标题。因此，当我请求外部站点内容时，我需要包含标头 x-forwarded-host。
<div>
<html> CONTENT OF EXTERNAL WEBSITE </html>
</div>
谢谢你
我正在尝试将asp.net mvc与angular 2应用程序集成.我知道这并不理想,但我被要求将一些现有的Mvc功能(想想大遗留应用程序)整合到一个全新的Angular 2水疗中心.
我想要做的是有一个cshtml视图,其中包含角度组件,以及纯mvc的东西......
<side-bar></side-bar>
<action-bar></action-bar>
@{
Html.RenderPartial("_SuperLegacyPartialView");
}
我很难找到任何方法来做到这一点.这篇博文看起来很有前途 - http://www.centare.com/tutorial-angular2-mvc-6-asp-net-5/.它使用了一个指向由Mvc和AsyncRoute呈现的路径的templateUrl值,但是在Angular 2中它们都不再有效.这篇文章看起来很有前途 - http://gbataille.github.io/2016/02/ 16/Angular2-Webpack-AsyncRoute.html,但它也使用AsyncRoute,不推荐使用.
这在Angular 1中非常容易.我们曾经手动将角度引导到Razor视图中,或者将局部视图渲染为组件/指令的templateUrl.在使用Webpack的最新Angular 2中执行此操作的最佳方法是什么？
@ angular / cli @ 1.0.0-rc.2
ng build -prod -e prod
vendor.380a744….bundle.js:218 Error: Runtime compiler is not loaded
at new Error (native)
at Error.d (http://localhost:9000/portal/assets/dist/polyfills.a61f849adcea6ec74b69.bundle.js:36:1731)
at r (http://localhost:9000/portal/assets/dist/vendor.380a74466a8bf08fbdda.bundle.js:1410:3338)
at t.compileModuleAndAllComponentsAsync (http://localhost:9000/portal/assets/dist/vendor.380a74466a8bf08fbdda.bundle.js:1417:702)
at e.ngOnChanges (http://localhost:9000/portal/assets/dist/main.f4b767a4fe115c7bb97e.bundle.js:1:1171229)
at e.ngDoCheck (http://localhost:9000/portal/assets/dist/main.f4b767a4fe115c7bb97e.bundle.js:1:914180)
at t.GGjx.t.detectChangesInternal (http://localhost:9000/portal/assets/dist/main.f4b767a4fe115c7bb97e.bundle.js:1:332790)
at t.R2h3.t.detectChanges (http://localhost:9000/portal/assets/dist/vendor.380a74466a8bf08fbdda.bundle.js:653:5749)
at t.Sqya.t.detectChangesInNestedViews (http://localhost:9000/portal/assets/dist/vendor.380a74466a8bf08fbdda.bundle.js:667:780)
at t.GGjx.t.detectChangesInternal (http://localhost:9000/portal/assets/dist/main.f4b767a4fe115c7bb97e.bundle.js:1:329907)
at t.R2h3.t.detectChanges (http://localhost:9000/portal/assets/dist/vendor.380a74466a8bf08fbdda.bundle.js:653:5749)
at t.R2h3.t.internalDetectChanges (http://localhost:9000/portal/assets/dist/vendor.380a74466a8bf08fbdda.bundle.js:653:5542)
at t.YSmj.t.detectChangesInternal (http://localhost:9000/portal/assets/dist/main.f4b767a4fe115c7bb97e.bundle.js:1:662563)
at t.R2h3.t.detectChanges (http://localhost:9000/portal/assets/dist/vendor.380a74466a8bf08fbdda.bundle.js:653:5749)
at t.Sqya.t.detectChangesInNestedViews (http://localhost:9000/portal/assets/dist/vendor.380a74466a8bf08fbdda.bundle.js:667:780)
package.json
{
"name": "app",
"version": "1.0.0",
"description": "Origianlly fomr a webpack starter for …我有一个(我认为是一个相当常见的)问题,我找不到使用当前Angular 4.x架构解决的好方法.也许有一种方法我还没有找到,但我已经进行了广泛的搜索.
我想将一些动态的,用户生成的HTML内容插入到Angular应用程序中.这个HTML内容我还包括一些已知的(包含在模块声明中)应该呈现的角度组件.下面是一些puesdo-app HTML可能会帮助我解释:
<app-component>
<!-- standard angular header and router-outlet -->
<app-header>
<app-nav>
<ul>
<li routerLink="/page-one">First Page</li>
<li routerLink="/page-two">Second Page</li>
<li routerLink="/page-three">Third Page</li>
</ul>
</app-nav>
</app-header>
<router-outlet></router-outlet>
<!--
the dynamic content would be inserted into the <main> element as HTML with angular <app-... tags
the content in the HTML content inserted main tag could contain anything
the angular components within the content should be initalized as normal
-->
<main>
<h1>Title</h1>
<app-component>
<p>this component and its content should be initalized …我试图在运行时将角度代码的*ngIf指令分配给模板.无法找到办法.view/templateref是一个选项吗？或者有一个不同的方式和一个更容易的方式.有可能首先吗？
更新:
代码有点混乱和混乱,所以避免它.但是这里是DOM代码的外观,以及为什么我需要动态添加内置结构指令.
<div>
<input type="text" [value]="userProvidedValue">
<textarea [value]="someDynamicDOMCodefromWYSIWYG">
<!-- user provided provided code or dynamic code -->
</textarea>
</div>
<div>
<select *ngIf="fetchArraywithHttpFromuserProvidedValue">
<option *ngFor="let val of fetchArraywithHttpFrom-userProvidedValue" value=""></option>
</select>
</div>
<div>
<ng-template>
<!-- Some User provided code or dynamic code which might need to use *ngIf OR *ngFor -->
<!-- The *ngIf OR *ngFor will be added dynamically based on a manipulator function which is decided from the value of fetchArraywithHttpFromuserProvidedValue -->
</ng-template>
</div>
我正在根据userProvidedValue值执行获取请求,并且获取请求的结果决定了fetchArraywithHttpFromuserProvidedValue …
我正在将我的Angular 2应用程序升级到beta.14到rc.4.
我在@ angular/core的DynamicComponentLoader上收到了一个弃用的警告.
要使用的新类是什么？有没有可用的例子？
在角度2中创建动态组件时,我发现此过程需要ViewContainerRef才能将新创建的组件添加到DOM.
Angular 2动态选项卡,用户单击所选组件 https://www.lucidchart.com/techblog/2016/07/19/building-angular-2-components-on-the-fly-a-dialog-box-example/
在将输入和输出传递给那些动态创建的组件时,我在上面的第二个链接中找到了答案:https: //codedump.io/share/kQakwDKNu0iG/1/passing-input-while-creating-angular-2-组件的动态使用-componentresolver
但是,如果我要创建一个名为shape.service的服务,其中包含使用bgColor等输入返回不同形状组件的函数,我不知道该服务如何在不指定DOM位置的情况下创建组件,以及容器组件如何接收这个返回的组件(可能是它的类型将是ComponentRef)来自服务并将其注入DOM容器组件指定.
例如,服务包含一个功能:
getCircle(bgColor:string): ComponentRef<Circle> {
let circleFactory = componentFactoryResolver.resolveComponentFactory(CircleComponent);
let circleCompRef = this.viewContainerRef.createComponent(circleFactory);
circleCompRef.instance.bgColor = bgColor;
return circleCompRef;
}
第一个问题在这里提出,我如何ViewContainerRef在此期间指出无处？我导入viewContainerRef的原因是动态创建组件.
第二个问题是容器组件@Input从服务接收特定于输入的内容后,它将如何注入其DOM？
提前致谢!
更新: 我认为上面的问题不够具体.我遇到的情况是:
这意味着服务调用组件不知道这些componentRef将被注入的位置.简而言之,我需要可以随时随地注入的独立组件对象.
我已经好几次读过rumTimeCompiler解决方案,但我真的不知道它是如何工作的.与使用viewContainerRef创建组件相比,似乎有太多工作要做.如果我找不到其他解决方案,我会深入研究一下......
我正在开发一个应用程序，我从服务器获取 html 格式的响应。我正在使用DomSanitizer 的bypassSecurityTrustHtml 并将清理后的html 添加到我的组件() 中。
我的问题是响应中的一些元素包含标签来指示可以从该元素构建链接，例如：
<div thisIsActuallyaLink linkParam1="foo" linkParam2="bar">clickHere</div>
我想创建一个应用于innerhtml的指令，但是当显示html时，它不是用我的指令编译的...
如果有人想知道为什么转换 html 不是在服务器端完成：响应在多个应用程序中使用，并且链接必须根据应用程序具有不同的相对 url :-(
在Angular 1中，我们可以使用templateUrl动态加载不同的外部模板，如下所示。
angular.module('testmodule).diretive('testDirective'), function(){
return {
restrict: 'EA',
replace: true,
scope: {
data: '@',
},
templateUrl: function(element, attrs) {
if(attrs.hasOwnProperty("attr")){
return "views/test1.html";
} else {
return "views/test2.html";
}
}
}
我的问题是如何在下面的Angular 2组件中实现相同的功能？
@Component({
selector: 'testDirective, [testDirective]',
template: require('./views/test1.html') or require ('./views/test2.html')
})
export class Angular2Component {
...
}
angular ×10
angular-cli ×1
asp.net-mvc ×1
dynamic ×1
iframe ×1
innerhtml ×1
javascript ×1
typescript ×1
webpack ×1