Question

我正在使用Angular 6创建一个Web应用程序，并创建了一个模板。应用程序的一部分非常相似，只有几个简单变量（例如title）。但是还有一部分会大不相同。

例如，有一个html文件'Template.html'

<--!some content...-->
<div>{{title}}</div>
<--!some content...-->

<div id="differentPart">

每个页面都有一个Typescript文件，它们始终具有上述html文件的url作为模板url：

@Component({
    selector: 'app-page1',
    styleUrls: ['style.css'],
    templateUrl:'Template.html'

})

export class Page1 implements OnInit, ... {

//define title 
title = "Page 1"

...

}

像“标题”这样的变量我总是可以在相应的TypeScript文件中定义。但是对于每个页面，id为“ differentPart”的div的内容都是不同的。为此，我已经尝试了许多不同的方法：

其他组件

我为每个页面创建了其他html文件，其中包含“ differentPart” div的html内容，以及一个附加的Typescript文件。例如，如果有一个文件'Page1Diff.html'和一个Typescript文件，如下所示：

@Component({
        selector: 'app-pageDiffInhalt',
        styleUrls: ['style.css'],
        templateUrl:'Page1Diff.html'

    })

    export class Page1Component extends Page1 {


    }

然后我将组件添加到模板文件中，如下所示：

出现了内容，但是由于该html内容使用了Page1的许多属性，因此无法正常工作，两个组件之间的交互并不完美。

2.jquery

我还尝试在Page1.ts

中实现以下行

$("#differentPartt").load("Page1Diff.html");

它完全失去了风格，无法正常工作。

有什么方法可以定义变量的html内容，并从另一个html加载它，就像html代码在那里一样。

例如

<div id="differentPart">
   {{content}}
  </div>

我在哪里定义内容的值，它是Page1Diff.html的内容，而没有任何jquery，AJAX或其他组件？

将HTML插入到HTML文件中就好像它就在那里一样，没有iFrame，没有JQuery，没有AJAX，只需将其插入

0 个答案: