html - 在角度版本 4 及更高版本中添加自定义 html 标记
问题描述
我有一个项目,我正在从旧版本的 angular 转换为 angular 版本 6。在旧项目中,我有一个自定义 html 标记,它被添加为指令。html标签是:
<search-result-item item="item"></search-result-item>
旧的 js 是:
'use strict';
(function() {
var searchResultItem = function($templateCache){
var controller = ['$scope', 'common.logModel', 'config', 'utilService', function($scope, Log, config, utilService){
var vm = this;
activate()
function activate(){
}
vm.getNumberOfWordsToShow = function (entry) {
if (typeof entry.numberOfWords === "undefined") {
return config.search.numberOfWordsShown;
}
else if (entry.numberOfWords === config.search.showAll) {
return config.search.showAllentry;
}
else {
return entry.numberOfWords;
}
}
vm.showMoreInfoLabel = function (entry) {
return (entry.details && entry.details !== null) ||
(entry.description.length > 0 && entry.description.length > config.search.numberOfWordsShown );
}
vm.showDetails = function (entry) {
entry.showDetails = !entry.showDetails;
entry.numberOfWords = entry.showDetails ? config.search.showAll : config.search.numberOfWordsShown;
}
vm.showMetadata = function (entry) {
utilService.openVoyagerLink(entry.pathToMetadata);
}
}];
return {
restrict: 'E',
replace: false,
scope: {
item: '='
},
controller: controller,
controllerAs: 'vm',
bindToController: true,
template: $templateCache.get('common/directives/searchresultitem/searchResultItem.tpl.html')
};
}
var commonModule = angular.module('commonModule');
commonModule.directive('searchResultItem', searchResultItem);
searchResultItem.$inject = ['$templateCache'];
}());
旧的 html 是:
<div class="row">
<div class="col-lg-9">
<div class="data-results-section">
<p class="search-result-url"><a ng-if="vm.item.path.substring(0,4) === 'http'" href="{{vm.item.path}}"
target="_blank">{{vm.item.path}}</a></p>
<div ng-if="vm.item.path.substring(0,4) !== 'http'">{{vm.item.path}}</div>
<p ng-show="vm.item.hasMetadata && vm.item.pathToMetadata.length > 0">
<a ng-click="vm.showMetadata(vm.item)" target="_blank">Metadata</a>
</p>
<p><span class="body-12-bold">Format: </span>{{vm.item.format}}</p>
<p><span class="body-12-bold">Indexed: </span>{{vm.item.indexed | date:'MM/dd/yyyy'}}</p>
<p><span class="body-12-bold">Relevance: </span>{{vm.item.score}}</p>
<p ng-show="vm.item.description.length > 0"><span>Description: </span>{{vm.item.description | htmlToPlaintext
| words : vm.getNumberOfWordsToShow(vm.item) }}
</p>
<div ng-show="vm.item.showDetails" ng-repeat="(key, val) in vm.item.details">
<p><span>{{key}}:</span>{{val}}</p>
</div>
<a class="search-result-view-more" href=""
ng-show="vm.showMoreInfoLabel(vm.item)"
ng-click="vm.showDetails(vm.item)">
<span ng-if="vm.item.showDetails">Hide</span>
<span ng-if="!vm.item.showDetails" class="links-14">View More Information</span> </a>
<!--links-14-->
</div>
<br>
</div>
<div class="col-lg-3">
<img class="search-result-img img-responsive"
ng-src="{{vm.item.thumbPath}}" fallback-img>
</div>
</div>
关于如何做的任何示例,因为我很难找到示例和文档的信息。
解决方案
如果您要将其移植到 Angular 代码中,则必须将所有内容封装在 @Component 中,大量示例和描述位于https://angular.io/api/core/Component
特别是,您需要查看selector
参数,因为它允许您指定如何在 html 中引用它。具体到您的示例可能看起来像
@Component({
selector: 'search-result-item'
...
然后你会引用它<search-result-item>
推荐阅读
- python - 为字典列表创建过滤函数的方法
- ruby-on-rails - 主延迟作业完成后调用钩子
- python - 由类方法处理的 Cython 中的单例
- java - Minium 使用胶水和浏览器抛出错误
- azure-devops - 如何从 git repo 中引用 tfvc 在 Visual Studio Online 中触发构建
- javascript - 如何在 vanilla JS 中将参数放到 setAttribute 函数上
- docker - Nginx Plus 无法使用 Docker 嵌入式 DNS 服务器解析服务
- javascript - HTML 实体到 Unicode 转义序列
- generics - 无法将特征边界添加到结构的成员
- php - Laravel 验证刀片语法