Bootstrap 4 Angular 7响应式圣杯布局

Question

我正在尝试使用相同的功能从bootstrap和jquery到Angular中实现Holy-Grail布局。我从this question获得了初始引导程序和jquery代码。

Here is the working jdFiddle

这是我要翻译为typecript的jquery代码（并成功实现了相同的实现）

$(function() {
    $(".menu-toggle").on("click", function(e) {
        if($(this).hasClass("nav")) {
            $("nav").addClass("open");
        }
        else {
            $("aside").addClass("open");
        }
        e.stopPropagation();
    });

    $("body:not(nav)").on("click", function(e) {
        $("nav, aside").removeClass("open");
    });
});

在尝试实现功能时，会出现不匹配的情况。

Here is my current implementation on stackblitz

我正在尝试完全按照其在Angular中的方式复制here中的功能。我遇到的问题是：

1. 我的实现中的滚动条可滚动整个页面，而不是滚动主要的中间内容，因此不像原始实现中那样具有粘性的标题和左侧的左侧菜单。

我要问的是，如何使this看起来与this完全一样，并特别强调滚动和粘性元素？

-------更新------

现在我要做的就是：

1. 标头
2. 具有左侧导航栏的粘性导航条。

Answer 1

我终于有了一个灵敏的圣杯布局，该布局由角材料和css制成。

Here is the working code in stackblitz

功能：

1. 具有响应能力的响应式布局。
2. 粘性页眉和页脚
3. 粘性左导航栏

如果您有任何改进，请务必在此处分享，以使我们所有人受益。干杯。