角組件在頁面上不可見

Question

我有以下Angular組件：

(function () {
    'use strict';

    function myHeader() {
        return {
            restrict: 'E',
            scope: {                
                pageTitle: '@'
            },
            template: '<div class="crumby-title">{{pageTitle}}</div>',
             link: function postlink($scope) {   

                const pageTitle = $scope.pageTitle;

             }
        };
    }

    myHeader.$inject = [];
    angular
        .module('xxx')
        .directive('myHeader', myHeader);
})();

我將其添加到html頁面中，但是由於某種原因，我找不到它，但在頁面上不可見，但是我可以找到它的檢查模式。

這是我的html頁面：

<div class="demand page">
    <div id="crumby-title">
        <div class="page-icon">
            <i class="fa fa-line-chart"></i>
        </div>
        <div class="page-title-demand" >
            <my-header page-title="Title!"></my-header>
        </div>
        <div class="bcrumb">
            <a href="/#!/url">Link to page</a>
        </div>
    </div> 
    <div class="my-nav">
    </div>  
    <div id="chart" class="demand-chart">
    </div>

</div>

或者也許我應該更改CSS中的某些內容

@import '../../styles/variables.less';
.my {
    .app__header {
        background-color: #ffffff;
        box-shadow: 1px 2px 2px rgba(1, 1, 1, 0.15);
    }
    .app__inner-content {
        background-color: #ffffff;
    }

    .demand-chart{
        padding-top: 50px;
    }

    #crumby-title {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #eee;

        .page-icon {
            font-size: 20px;
            padding: 14px 18px;
            background: #e7e7e7;
            position: absolute;
        }

        .page-title-demand {
            float: left;
            font-size: 20px;
            font-weight: bold;
            padding: 5px 21px 31px 79px;
            height: 55px;
        }

        .bcrumb {
            float: left;
            top: 29px;
            left: 75px;
            position: absolute;
        }   
    }

    .my-nav {
        border-bottom: 1px solid #e7e7e7;
        padding-top: 10px;
        padding-bottom: 30px;
    }
}

知道為什么組件中的文本在頁面上不可見嗎？

Answer 1

這應該工作

(function () {
  'use strict';
   var HeaderComponent = {
     bindings: {
       pageTitle: '@'
     },
     template: '<div class="crumby-title">{{$ctrl.pageTitle}}</div>'
   }
  angular.module('myapp', [])
    .component('myHeader', HeaderComponent);
})();

<my-header page-title="Title!"></my-header>