Question

我正在使用Visual Studio 2017中的最新SPA模板：

https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/

模板项目工作正常。

我完成了这样的根模块：

export class AppComponent {
   pageTitle: string = 'Angular 2';
}

和navmenu组件一样：

<a class='navbar-brand' [routerLink]="['/home']">{{pageTitle}}</a>

但是没有显示新标题

我是Angular 2的新人，所以我想我误解了一些事情。但我不知道与提供的样本有什么不同（fetchdata，counter）

Answer 1

请注意，您正在尝试访问父组件中定义的变量（app是导航菜单的父级）。

这可以使用@Input完成，如本答案中所述：Angular2: child component access parent class variable/function

添加'输入'作为导入并创建标题@Import。

    import { Component, Input } from '@angular/core';
    ...
    export class NavMenuComponent {
        @Input() sTitle;
    }

通过app html中的标题。

    <nav-menu [sTitle]="pageTitle"></nav-menu>

更新nav-menu html以使用子变量名。

    <a class='navbar-brand' [routerLink]="['/home']">{{sTitle}}</a>

有关组件互动的更多信息，请参阅以下内容：https://angular.io/guide/component-interaction

Answer 2

好的 - 我已经在Visual Studio 2017中使用最新的针对dotnetcore2的SPA模板工作了，我将粘贴每个需要同步的部分的代码以使其正常运行。

变量名称非常长，因此更容易跟踪或跟踪其中的位置和原因。希望这有帮助

在App组件ts文件中，我有以下代码，用于定义页面标题的属性：

export class AppComponent {
    strVarPageTitleFromAppComponent: string = 'Page Title - Parent App';
}

在App Component HTML中定义了Input钩子，它利用App组件中的这个变量：

 <div class='col-sm-3'>
            <nav-menu [pageTitleInputFromParentComponentToChildComponent]="strVarPageTitleFromAppComponent"></nav-menu>
        </div>

然后在Nav Component Typescript文件中添加Input和property，如下所示：

import { Component, Input } from '@angular/core';

@Component({
    selector: 'nav-menu',
    templateUrl: './navmenu.component.html',
    styleUrls: ['./navmenu.component.css']
})
export class NavMenuComponent {
    @Input('pageTitleInputFromParentComponentToChildComponent') pageTitleVarFromNavComponent: string;
}

最后，在子组件（Nav）组件中定义的变量在该组件的HTML显示模板中得到充分利用：

 <li [routerLinkActive]="['link-active']">
                    <a [routerLink]="['/home']">
                        <span class='glyphicon glyphicon-home'></span> {{pageTitleVarFromNavComponent}}
                    </a>
                </li>

希望有所帮助

无法在SPA Angular 2模板项目上进行绑定

2 个答案: