背景: 我们假设为了论证你有100,000个视图(部分).我们还假设您具有视图范围的控制器,以及可能的视图范围的服务和过滤器.尝试设想一个托管100,000个不同的小应用程序的聚合应用程序.
问题: 当你有需要附带控制器的"部分"时,典型的解决方案是做这样的事情:
$routeProvider.when('/app1', {
templateUrl: 'partials/view1.html',
controller: 'controller1'
});
控制器通常从index.html通过以下方式加载:
<script src="js/directives/Controller1.js"></script>
这种方法的问题在于它不能扩展.有动态加载控制器的解决方案,但它们仍然需要在各种配置中添加触摸点.
理想的解决方案: 理想情况下 - 对于数量在000的非常小的应用程序,控制器可以动态加载,也可以从部分内部加载.这将减轻管理多个文件和几个配置触摸点(更不用说网络请求)的需要,并且保持每个部分非常好.
它看起来像这样:
在路由器中:
$routeProvider.when('/apps/:appId', {
templateUrl: 'partials/app-frame.html',
controller: 'AppCtrl'
});
在包含html(app-frame)中包含相对不同的"迷你app":
<h1>Currently hosting {{appId}}</h1><hr>
<div class="ng-include: appUrl"></div>
在使用appUrl进行部分解析时,在一个中定义控制器和标记:
<script>
myApp.controller('controller1', ['$scope', function ($scope) {
$scope.foo = "bar";
}]);
</script>
<div ng-controller="controller1">
{{foo}}
</div>
对于这样的情况,有很多部分和控制器和视图的1-1映射,将两者结合起来以提高开发效率和维护是有意义的.它比使用多个文件和其他配置触摸点更清晰.
问题是,这不起作用.它可能就像在应用指令之前强制加载脚本一样简单......但不知道如何做到这一点？
以下是对该问题的一些类似解释:
https://groups.google.com/forum/#!topic/angular/H4haaMePJU0
来自AngularJS团队的Igor说:
I see.. we looked into supporting script tags in jqlite, but what needs to be done to get a cross-browser support …我希望每个设备模板有1个用于angular2中的视图,对于某些视图,所有设备可能有1个.在angular2中是否可以基于浏览器用户代理
我正在尝试在我的Angular模板中呈现Javascript广告,但它不会显示.当我们将Javascript附加到head标签时我找到了一些解决方案,但我希望将广告放在我的Html(body body)中.
这是一个Plunker:https://plnkr.co/edit/WHhQ95gS5HKSphmmirio
这是一个简单的简单Html示例.
<html>
<head>
</head>
<body>
<div class="ad">
<script src="http://media.affiliatelounge.com/data/nordicbet/ad_js/display_88.js?ad=ad_793270_88.html&size=300x250&clicktag=http://record.affiliatelounge.com/_sVuSoFFh4LK58VwA2IUESrKVVrME-Gsw/1&media=108786&campaign=1"></script>
</div>
</body>
</html>
但是,如果我在Angular模板中添加div,它将无法渲染,控制台也没有任何内容.
我在这里播放并运行了一些广告(http://www.odds.nu/erbjudanden),但它们是.gif或iframe.我希望能够显示Javascript广告.它们被添加到Html中,但不会被渲染(放在页面底部).
$ sce或$ compile可以帮助吗？
我的index.html
<div data-ng-view="" class="mainView"></div>
我的app.js.
$routeProvider.when("/erbjudanden", {
controller: "offerController",
templateUrl: "/app/templates/offers.html"
});
我的offer.html
<div class="ad">
<script src="http://media.affiliatelounge.com/data/nordicbet/ad_js/display_88.js?ad=ad_793270_88.html&size=300x250&clicktag=http://record.affiliatelounge.com/_sVuSoFFh4LK58VwA2IUESrKVVrME-Gsw/1&media=108786&campaign=1"></script>
</div>
有解决方案吗
我试图在元素上定义模板变量并使用其隐藏属性来识别元素是否实际存在于DOM中,然后基于该元素显示另一个元素.但是如果有结构指令,模板变量似乎不会返回值.
<hr class="divider" *ngIf="true" #divi>
<div *ngIf="showResendWelcomeEmailButton">
<a *wpHasAnyPermission="[{'something': true}]"
#resendEmailBtn>
Resend Welcome Email
</a>
</div>
<div class="pull-right">
<a #editAccountBtn>Edit Account Details</a>
</div>
rbtn: {{resendEmailBtn?.hidden}}
ebtn: {{editAccountBtn?.hidden}}
dline: {{divi?.hidden}}
输出是
rbtn:
ebtn: false
dline:
您可以在包含属性的元素上看到两个模板变量ngIf,wpHasAnyPermission但不返回值.
我想最终做的是使用resendEmailBtn与editAccountBtn在ngIf的hr决定显示了分频器.
解决这个问题的最佳方法是什么？我想避免处理组件代码.尝试用HTML解决这个问题.
如果没有observable,我可以在HTML模板中编写以下行:
<div *ngIf="(myVarA || myVarB) && myVarC !== x"></div>
如果myVar现在所有变量都是可观察的,那么如何翻译这一行呢？
<div *ngIf="((myVarA | async) || (myVarB | async)) && (myVarC | async) !== x">
不起作用.
在另一个问题(在一个Angular*ngIf语句中放置两个异步订阅)可以实现将两个或多个observable组合成一个ngIf的可能性
<div *ngIf="{ a: myVarA | async, b: myVarB | async } as result"></div>
但是,我没有看到在表达式上使用任何布尔运算符(或任何运算符)的可能性,然后用于计算ngIf.
我该如何解决这个问题？请注意,我的所有Observable都使用下面的BehaviorSubject.我认为我想要的是combineLatest在模板中使用运算符.
额外:如果整个表达式的计算结果为true,以便以后在模板中使用,有没有办法提取myVarA的单个值(如myVarA | async as varA)？
这个问题已经说过,但不幸的是没有答案对我有用.
这是我的问题(角5):
<option
*ngFor="let country in countries"
[value]="country.id" >
{{'page.choose_country' | translate}} *
</option>
我有一个简单的代码,但它仍然显示我这个错误:
无法绑定到'ngForIn',因为它不是'option'的已知属性.
它不接受select中的*ngFor(我输入相同的结果)
我已经发现了几个类似的答案commModule,并bowersModule需要被导入到模块或把b .....我想在这里找到解决方案,但没有任何工程.
尽管我的英语很可怕,但我希望你能理解我一点点.感谢您的答复
我想渲染QueryList中填充的一个元素的内容 ContentChildren.
假设我想构建制表符组件,这是我使用此类组件的模板:
<my-tabs>
<my-tab title="title1">some content 1<my-tab>
<my-tab title="title2">some content 2<my-tab>
</my-tabs>
我当前的标签组件html:
<div class="header">
<ul>
<li> *ngFor="let tab of tabs, let i = index; let isLast = last">...<li>
</ul>
</div>
<!-- Missing !!! -->
码:
@ContentChildren(MyTabComponent) public tabs: QueryList<MyTabComponent>;
我的问题是如何只渲染活动标签？(<!-- Missing !!! -->)
我试过了:
<ng-container [ngComponentOutlet]="tabs.toArray()[currentIndex].content"></ng-container>
<ng-container [ngTemplatetOutlet]="tabs.toArray()[currentIndex].content"></ng-container>
<ng-container [ngComponentOutlet]="tabs.toArray()[currentIndex]"></ng-container>
<ng-container [ngTemplatetOutlet]="tabs.toArray()[currentIndex]"></ng-container>
但是从不呈现标签内容.my-tab组件html只是:
<div>body</div>
<ng-template><ng-content></ng-content></ng-template>
在这一刻.
我在网上查看别人如何解决这个问题,但每个人都在使用<ng-content></ng-content>,然后隐藏非活动标签.
但我认为更好的是只渲染所需的内容(更好的性能).
我也发现这个代码在哪里<ng-container [ngTemplateOutlet]="step.content"></ng-container>使用,但我尝试了这种方法,它没有渲染任何东西.
编辑:
我也准备stackblitz.
为什么要在 Angular 中的内置指令ngTemplateOutlet和ngComponentOutlet 上使用cdkPortal。它们不是都提供相同的功能吗？CDK 门户中是否有没有内置指令的特定功能？
它显示模板有错误，
错误：
我的html
<input type="text" [(ngModel)]="mymessage"
<button (click)="clickMe()"> send</button>
<br><br>
<h1>{{result | json}}</h1>
我的组件.ts
import {Component} from "@angular/core";
export class MyComponent {
private result: any;
constructor()
}
我创建了一个可重用的组件来呈现表格。它目前适用于基本表格，但在某些情况下我希望能够自定义表格中的单个列/单元格。
这是我在父组件中使用的代码：
<!-- PARENT TEMPLATE -->
<app-table
[headers]="headers"
[keys]="keys"
[rows]="rows">
</app-table>
// PARENT COMPONENT
public headers: string[] = ['First', 'Last', 'Score', 'Date'];
public keys: string[] = ['firstName', 'lastName', 'quizScore', 'quizDate'];
public rows: Quiz[] = [
{ 'John', 'Doe', 0.75, '2020-01-03T18:18:34.549Z' },
{ 'Jane', 'Doe', 0.85, '2020-01-03T18:19:14.893Z' }
];
我在子组件中使用的代码：
<!-- CHILD TEMPLATE -->
<table>
<thead>
<tr>
<td *ngFor="let header of headers">
{{ header }}
</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of rows">
<td *ngFor="let key of keys">
{{ render(key, …angular-template ×10
angular ×8
angularjs ×3
ads ×1
angular-cdk ×1
javascript ×1
mobile ×1
rxjs ×1