错误：主要插座已注册

Question

我有一个场景，我想在点击角度材料标签时加载组件。当我点击第一个标签时它正确加载而第二个标签显示错误Primary Outlet is already registered我正在使用1.5角组件。

组件：

    (function() {
    app.component('tabComponent', {
        templateUrl: 'components/tabComponent/tabComponent.html',
        bindings: {
            $router: '<'
        },
        controller: tabComponentCtrl,
        $routeConfig: [{
            path: '/tab1-component',
            name: 'Tab1Component',
            component: 'tab1Component',
            useAsDefault: true
        }, {
            path: '/tab2-component',
            name: 'Tab2Component',
            component: 'tab2Component'
        }]
    });

    function tabComponentCtrl() {
        var scope = this;
        scope.aTabs = [{
            name: 'Tab1Component',
            component: 'tab1Component'
        }, {
            name: 'Tab2Component',
            component: 'tab2Component'
        }];
        scope.fnGetTab = function(name) {
            this.$router.navigate([name]);
        }
    }
})();

这里的标签是ng-repeat。 的 HTML ：

<md-content class="tabs-color" layout-margin="30px">
    <md-tabs md-dynamic-height="" md-border-bottom="">
        <div ng-repeat="tab in $ctrl.aTabs">
            <md-tab label="{{tab.name}}" md-on-select="$ctrl.fnGetTab(tab.name)">
                <md-content class="md-padding">
                    <ng-outlet></ng-outlet>
                </md-content>
            </md-tab>
        </div>
    </md-tabs>
</md-content>

任何帮助将不胜感激。