Question

我有一个项目我正致力于从较旧版本的角度转换为角度版本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>

关于如何做的示例的任何指示，因为我很难找到有关此示例和文档的信息。

Answer 1

如果你将它移植到Angular代码中，你必须将所有内容包装到@Component中，在https://angular.io/api/core/Component上有大量的例子和描述

特别是，您需要查看selector参数，因为它允许您指定如何在html中引用它。具体到您的示例可能看起来像

@Component({
   selector: 'search-result-item'
   ...

然后你用<search-result-item>

引用它

在角度版本4及更高版本中添加自定义html标记

1 个答案: