[英]Angular 9 does not recognise HTML <script> tags
My dashboard.component.html我的dashboard.component.html
<button type="button" id="sidebarCollapse" class="btn btn-info">Collapse</button>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$('#sidebarCollapse').on('click',function(){
$('#sidebar').toggleClass('active');
});
});
</script>
This compiles perfectly along with other code inside the dashboard.component.html file, but after ng serve.这与dashboard.component.html文件中的其他代码一起完美编译,但在ng serve之后。 My application does not execute the Collapse button when clicked.
单击时,我的应用程序不执行折叠按钮。
If I run the file separately as index.html with its style.css outside Angular Framework, it tends to work fine.如果我将文件作为 index.html 和 style.css 在 Angular 框架之外单独运行,它往往会正常工作。 The issue exists with bootstrap libraries not being executed by Angular or something related.
问题存在于引导库没有被 Angular 或相关的东西执行。
I have rest of the full functional code in stackblitz for reference https://stackblitz.com/edit/dashboardissue我在 stackblitz 中有其余的完整功能代码供参考https://stackblitz.com/edit/dashboardissue
Please don't do it that way.请不要那样做。 You can easily toggle Sidebar with just Angular and you don't have to mix jQuery in it.
您可以仅使用 Angular 轻松切换侧边栏,而不必在其中混合 jQuery。
app.component.html应用程序组件.html
<button type="button" id="sidebarCollapse"(click)="toggleSidebar()" class="btn btn-info">Collapse</button>
app.component.ts app.component.ts
export class AppComponent {
name = 'Angular';
collapsed: boolean = false;
toggleSidebar(): void {
this.collapsed = !this.collapsed;
}
}
Updated your version: https://stackblitz.com/edit/dashboardissue-zxiuvt更新您的版本: https : //stackblitz.com/edit/dashboardissue-zxiuvt
是的,有很多代码要做,正如 dallows 回答的那样,如果您想更简单地使用箭头函数,只需 1 行。
toggleSidebar = () => this.collapsed = !this.collapsed;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.