我需要在Angular2中构建一个readmore指令.该指令将用于折叠并使用"Read more"和"Close"链接扩展长文本块.不是基于字符数,而是基于指定的最大高度.
<div read-more [maxHeight]="250px" [innerHTML]="item.details">
</div>
任何人都可以指导什么是最可靠的方法来获得/设置这种特定情况下的元素的高度.
关于如何实施这一具体指令的任何指导方针也将受到高度赞赏.
我需要构建类似这样的https://github.com/jedfoster/Readmore.js
解:
在Andzhik的帮助下,我能够构建满足我要求的以下组件.
import { Component, Input, ElementRef, AfterViewInit } from '@angular/core';
@Component({
selector: 'read-more',
template: `
<div [innerHTML]="text" [class.collapsed]="isCollapsed" [style.height]="isCollapsed ? maxHeight+'px' : 'auto'">
</div>
<a *ngIf="isCollapsable" (click)="isCollapsed =! isCollapsed">Read {{isCollapsed? 'more':'less'}}</a>
`,
styles: [`
div.collapsed {
overflow: hidden;
}
`]
})
export class ReadMoreComponent implements AfterViewInit {
//the text that need to be put in the container
@Input() text: string;
//maximum height of the container
@Input() maxHeight: number …我有新的翻译问题ng-content.
假设我有一个组件my-component,在其ngOnInit()函数中对加载执行一些繁重的操作(现在,只是一个console.log()).
我有一个包装器,它通过transclusion(my-wrapper.component.html)显示内容.
<ng-content></ng-content>
如果我像这样设置周围环境,则日志语句不会显示:
<my-wrapper *ngIf="false">
<my-component></my-component>
</my-wrapper>
我假设,my-wrapper组件没有构建,因此内容被忽略.
但是,如果我尝试将逻辑移动到my-wrapper像这样的组件(my-wrapper.component.html):
<ng-container *ngIf="false">
<ng-content></ng-content>
</ng-container>
我总是看到console.log()输出.我猜,它my-component会被构建然后存储起来直到*ngIf变成true里面my-wrapper.
目的是建立一个通用的"列表项+细节"组件.假设我有一个N overview-elements(my-wrapper)列表,它们在*ngFor循环中呈现.my-component一旦我决定向特定项目显示更多信息,那么每个元素都有自己的详细信息组件(),它应该加载自己的数据.
overview.html:
<ng-container *ngFor="let item of items">
<my-wrapper>
<my-component id="item.id"></my-component>
</my-wrapper>
</ng-container>
我-wrapper.component.html:
<div (click)="toggleDetail()">Click for more</div>
<div *ngIf="showDetail">
<ng-content></ng-content>
</div>
有没有办法告诉Angular,在有必要将其添加到页面之前忽略已转换的内容？类似于它在AngularJS中的表现.
这是一个模板示例:
<span count="{{currentCount}}"></span>
<span [count]="currentCount"></span>
在这里他们两个都做同样的事情.哪个是首选,为什么？
基本上我正在寻找一种方法来实现Angular 1.x ngInit指令的对应物.
我知道ngOnInit钩子以及它是初始化代码的推荐位置.我认为ngInit指令是一种快速的,声明性的方式来原型化或修复一个通常不应该在编写良好的生产代码中使用的组件(尽管开发人员有权选择对他/她最有利的方法).
在init伪指令中做类似的事情
<p [init]="foo = 1; bar()"><p>
多次评估表达式并导致
模板解析错误:
分析器错误:绑定不能包含分配
错误.
在Angular 1.x中,它可以完成
$parse($attrs.init)($scope)
如何使用Angular 2解析器并可能扩展它来评估foo = 1; bar()组件初始化时的模板表达式？
javascript typescript angular2-directives angular2-template angular
我正在使用角度2.0决赛.我正在尝试更改主app.component.html中路由器插座的位置.模板正在更新精细显示,除了,我第一次使用router.navigate组件将不会显示在新的路由器插座中,并且没有错误.第二次和每次使用router.navigate后它都能正常工作.
app.component.html的示例模板
<div *ngIf="authenticated() == false">
<h1>not logged in</h1>
<router-outlet>
</router-outlet>
</div>
<div *ngIf="authenticated()">
<h1>logged in</h1>
<router-outlet>
</router-outlet>
</div>
友.
我找到了一个延迟在Angular 2中启动我的模块的场景.我不是Angular的经验人员.这是我的第一个项目.所以,不知道如何处理这种情况.请任何能解释我的人.
场景: -
我创建了一个小应用程序,其中有各种模块.每个模块都有2-3个子组件.但我的SignUp模块和MyAccount模块是各种组件的混合体.
下面是我的应用程序的层次结构.
app
--Front-end
---- videos
------ Detail
-------- videodetail.component.html
-------- videodetail.component.ts
------列表
-------- list.component.html
-------- list.component.ts
------ videos.component.html
------ videos.component.ts
- ----- videos.routing.ts
------ videos.module.ts
---- article
------ article.component.html
------ article.component.ts
- --front-end.routing.ts
---- front-end.module.ts
---- front-end.component.ts
---- front-end.component.html
--signup
---- stepone
------ stepone.component.html
------ stepone.component.ts
---- steptwo
------ steptwo.component.html
------ steptwo.component.ts
- --- stepthree
------ stepthree.component.html
------ stepthree.component.ts
---- stepfour
------ stepfour.component.html
------ stepfour. component.ts
---- final
------ final.component.html
------ final.component.ts
---- OneMore …
我正在使用Angular 5中的Material Component处理一个项目.我确实更新了我的Visual代码,但我不知道发生了什么.我正面临一个问题"类型'ElementRef'不是通用的." 从早上起我一直坚持这个问题.
这一行出错
_inputElement: ElementRef<HTMLInputElement>;
constructor(toggleGroup: MatButtonToggleGroup, _changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLInputElement>, _focusMonitor: FocusMonitor);
angular2-forms angular2-template angular2-services angular angular5
使用Angularjs 1.x,您可以轻松地在编辑/读取模式之间的按钮单击上切换html模板.ng-include指令是关键.
<table>
<thead>
<th>Name</th>
<th>Age</th>
<th></th>
</thead>
<tbody>
<tr ng-repeat="contact in model.contacts" ng-include="getTemplate(contact)">
</tr>
</tbody>
</table>
get getTemplate函数执行以下代码:
$scope.getTemplate = function (contact) {
if (contact.id === $scope.model.selected.id) return 'edit';
else return 'display';
};
这再次导致其中一个模板在UI中处于活动状态:
显示
<script type="text/ng-template" id="display">
<td>{{contact.name}}</td>
<td>{{contact.age}}</td>
<td>
<button ng-click="editContact(contact)">Edit</button>
</td>
</script>
编辑
<script type="text/ng-template" id="edit">
<td><input type="text" ng-model="model.selected.name" /></td>
<td><input type="text" ng-model="model.selected.age" /></td>
<td>
<button ng-click="saveContact($index)">Save</button>
<button ng-click="reset()">Cancel</button>
</td>
</script>
https://jsfiddle.net/benfosterdev/UWLFJ/
对于Angular 2 RC 4,不存在n-include.
如何使用Angular 2 RC4进行相同的功能？
我正在使用Angular 2(更改)来检测上传的文件并触发该功能.但是当我尝试再次上传同一个文件时,我遇到了问题,因为文件没有变化,(触发)没有变化.在这种情况下,请建议事件绑定.
<input type="file" name="file" id="fileupload" (change)="onChange($event)"/>
有没有办法将类型文件的输入值重置为空.
我有一个组件,我传递模板.在这个组件内部,我想传递上下文,以便我可以显示数据.
@Component({
selector: 'my-component',
providers: [],
template: `
<template [ngTemplateOutlet]="templ" [ngOutletContext]="{isVisible: true}">
</template>
`
})
export class MyElementComponent implements OnInit {
@ContentChild(TemplateRef) templ;
constructor(){}
}
现在在其他组件中使用组件时:
<my-component>
<template>
{{isVisible ? 'yes!' : 'no'}}
</template>
</my-component>
所以在my-component我传递一个模板,该模板在其类的@ContentChild名称中处理templ.
然后,在my-component传递templ给我的模板中ngTemplateOutlet,另外,我正在传递ngOutletContext已isVisible设置为的上下文true.
我们应该yes!在屏幕上看到,但似乎上下文永远不会通过.
我的角度版本:
"@angular/common": "^2.3.1",
"@angular/compiler": "^2.3.1",
"@angular/core": "^2.3.1",
javascript typescript angular2-directives angular2-template angular