无法在SPA Angular 2模板项目上进行绑定-Java 学习之路

我在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>

但是没有显示新 Headers

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

2 回答

0
请注意，您正在尝试访问父组件中定义的变量（app是nav-menu的父级） .

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

添加“输入”作为导入并创建 Headers @Import .
```
import { Component, Input } from '@angular/core';
    ...
    export class NavMenuComponent {
        @Input() sTitle;
    }
```
通过app html中的 Headers .
```
<nav-menu [sTitle]="pageTitle"></nav-menu>
```
更新nav-menu html以使用子变量名称 .
```
<a class='navbar-brand' [routerLink]="['/home']">{{sTitle}}</a>
```
有关组件交互的更多信息，请参阅以下内容：https://angular.io/guide/component-interaction
回复于 2024-04-29T08:52:57+08:00

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

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

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

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>

希望有所帮助

回复于 2024-04-29T08:52:57+08:00

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

2 回答

相关问题